vue-routerルーティングの構成と使用手順の整理

1.ルーティングの基本概念
実は、ページのホームボタンをクリックすると、ページにホームの内容が表示され、ページのaboutボタンをクリックすると、ページにaboutの内容が表示されます.ホームボタン=>ホームコンテンツ、aboutボタン=>aboutコンテンツは、一種のマッピングともいえる.だからページには2つの部分があって、1つはクリック部分で、1つはクリックした後に、内容を表示する部分です
3つの基本的な概念route,routes,router.
1,route,それは1本のルートで、この英語の単語からも見ることができて、それは単数で、Homeボタン=>home内容で、これは1本のrouteで、aboutボタン=>about内容で、これは別のルートです.
2,routesはルーティングのセットであり,上の各ルーティングを組み合わせて配列を形成する.[{ホームボタン=>ホームコンテンツ},{aboutボタン=>aboutコンテンツ}]
3,routerは,ルーティングを管理する管理者に相当するメカニズムである.routesはルートのセットを定義しただけなので、どこに置いても静止しています.本当に要求が来ました.どうしますか.ユーザーがホームボタンをクリックしたとき、どうすればいいですか?このときrouterが機能し、routesで検索し、対応するホームコンテンツを見つけるので、ページにホームコンテンツが表示されます.
4,クライアント内のルーティングは,実際にはdom要素の表示と非表示である.ページにホームコンテンツが表示されるとaboutのコンテンツはすべて非表示になり、逆も同様です.クライアントルーティングにはhashベースとhtml 5 historyベースapiの2つの実装方式がある.
2.ルーティングの実現方法
vueでルーティングを実現するには、パスとコンポーネントを対応させ、ページでコンポーネントをレンダリングする必要があります.
1.ページ実装(htmlテンプレート)
vue-routerでは、ページでクリックした部分を定義し、表示部分を定義します.クリックすると、どこに表示されますか.だからもう一つ重要な属性toは、クリックした後、どこへ行くかを定義します.例えば、ホーム
2.jsでのルーティングの構成
まずrouteを定義し,ルーティングの実装を行う.これはオブジェクトで、pathとcomponentの2つの部分から構成されています.pathはパスを指し、componentはコンポーネントを指す.例えば:{path:’/home’,component:home}

//         ，    routes: 

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]
//    router        ，        new vueRouter()   ，  routes   。

const router = new VueRouter({
      routes // routes: routes    
})
//     ， router       vue     ,        

const app = new Vue({
  router
}).$mount('#app')

実行プロセス:ユーザーがrouter-linkラベルをクリックすると、そのto属性が見つかり、そのto属性とjsで構成されたパス{path:'/home'、component:Home}pathが1つ1つ対応し、一致するコンポーネントが見つかり、最後にコンポーネントをラベルの場所にレンダリングします.これらの実装こそhashに基づいて実現される.
3ルーティング構成使用手順の詳細
1.src/router.index.jsに導入

import Vue from 'vue'
import Router from 'vue-router'

注意このRouterはカスタマイズされた名前です.ここでこの名前を呼ぶと、下にも使います.
2.使用/登録

Vue.use(Router)
//    vue    vueRouter

3.ルーティングの構成

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})

4.ルーティング対応のコンポーネントアドレスの導入

import home from '@/components/home'
import about from '@/components/about'

5.main.jsでindexを呼び出す.jsの構成

import router from './router'

6. App.vueページ使用(表示)ルーティング:このラベルを対応する位置に配置する:

 7.経路切替(従来のなどの場所):切り替えラベルとリンクを次のように変更します。

home
    about

ソースコードは以下の通りです.
main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import about from '@/components/about'

Vue.use(Router)
//    vue    vueRouter
export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})

App.vue展示Vue

export default {
  name: 'App'
}

コンポーネントを切り替えるためのナビゲーションページのルーティングリンク設定

export default {
  name: 'App'
}