Vue-routerセクション1 Vue-routerの概要

Vue-routerセクション1 Vue-routerの概要
- セクション1 Vue-routerの使用開始
  - vue-routerをインストールする

セクション1 Vue-routerの使用開始

はじめに：Vue開発ではルーティングがサポートされていないため、オフィシャルはVueエコロジカル環境で非常に重要なvue-routerプラグインを追加しました。実際の開発では、ページが作成されている限り、vue-routerが動作します。vue-routerを学ぶには、ここでのルートを知る必要がありますか？ここでのルーティングは、私たちが通常話しているハードウェアルーターを指すものではありません。ここでのルーティングは、SPA（シングルページアプリケーション）パスマネージャです。簡単に言えば、vue-routerはWebAppのリンクパス管理システムです。

以前は、<a></a>タグを使用してリンクを記述していましたが、Vueを使用して単一ページのアプリケーションを作成しました。これは、1つのメインindex.htmlページに相当するため、記述する<a></a>タグが機能しないため、vueを使用する必要があります管理するルーター。

vue-routerをインストールする

vue-routerはプラグインパッケージであるため、cnpmを使用してインストールする必要があります。コマンドラインツールを開き、プロジェクトディレクトリを入力して、次のコマンドを入力します。

npm install vue-router --save-dev

vue-cliの使用中にvue-routerのインストールを選択した場合は、インストールを繰り返す必要はありません。

router / index.jsファイルを解釈する

vue-cliを使用して、src/router/index.jsファイルにあるプロジェクト構造を作成しました。このファイルはルーティングのコアファイルです。まず、それを解釈しましょう。

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import HelloWorld from '@/components/HelloWorld'  //引入根目录下的HelloWorld.vue组件

Vue.use(Router)   //Vue全局使用Router

export default new Router({
  routes: [                    //配置路由，这里是个数组
    {                          //每一个链接都是一个对象
      path: '/',               //链接路径
      name: 'HelloWorld',      //路由名称
      component: HelloWorld    //对应的组件模板
    }
  ]
})

実際、このルーティングファイルでは、プロジェクトに入るときにHelloWorld.vue内にコンテンツコードを表示する関数が1つだけ構成されています。

Hiルートとページを追加する
コアルーティングファイルを理解したら、ルート構成を追加してみhttp://localhost:8080/#/hiましょう。アドレスバーに入力すると、新しいページが表示されることを期待しています。必要な効果を見てみましょう。

以下の手順に従ってください：

src / componentsディレクトリで、新しいHi.vueファイルを作成します。
前にも言ったように、コンテンツを書く、単に、ファイルは3つの部分から構成<template><script>して<style>。ファイルは非常にシンプルで、文章を印刷するだけです。

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'Hi',
    data(){
        return {
            msg: 'Hi,I am Daisy'
        }
    }
}
</script>

<style scoped>

</style>

Hiコンポーネントの紹介：router/index.jsファイルの上にHiコンポーネントを紹介します

import Hi from '@/components/Hi'

ルーティング構成を追加します。router/index.jsファイルのroutes []配列に、新しいオブジェクトを追加します。コードは次のとおりです。

{
     path: '/hi',
     name: 'Hi',
     component: Hi
}

これは既に新しいページを追加できます。
注：コンポーネントの名前は、インポート後の名前と同じである必要があります。1つは、ページを正しく表示できるように登録を導入することです

ルーターリンクのプロダクションナビゲーション
アドレスバーの文字列アドレスを変更することで、コンテンツを変更できます。必要なのは、ページ上の適切なナビゲーションリンクです。クリックする限り、ページのコンテンツを変更できます。リンクを作成するに<router-link>はラベルが必要です。まず構文を見てみましょう。

<router-link to="/">[显示字段]</router-link>

to：ナビゲーションパス、router/index.jsファイルで構成したパスの値を入力します。デフォルトのホームページに移動する場合は、次のように記述します。to="/"
[表示フィールド]：ホームページのニュースページなど、ユーザーに表示するナビゲーション名。

router-linkの基本的な構文を理解し、ナビゲーションを実現するためにsrc / App.vueファイルのテンプレートに次のコードを追加します

<p>导航：
	<router-link to="/">首页</router-link>
    <router-link to="/Hi">Hi页面</router-link>
</p>

これで、訪問するページにアクセスして、ナビゲーションが増えました。