1. vue-router的基本使用過程：

【1】在vue CLI + webpack專案目錄中，建立一個vue-router資料夾，在此資料夾下建立index.js，用來配置vue-router

【2】index.js中：(1) 匯入元件

const Home = () => import('../views/home/Home'); // 此處使用了 '路由懶載入'

(2) 建立路由 routes

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
];
 

(3) 配置路由 new VueRouter({ ... })

const router = new VueRouter({
  routes,
  mode: 'history'
});

(4) 匯出並掛載根元件例項

src/router/index.js 中

export default router

src/main.js 中

import router from './router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

注意：在使用VueRouter時，需要依賴Vue，程式碼如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

2. 區分：this.$router 是 router 路由器物件

this.$route 是當前路由元件物件

3. 動態路由匹配：

【1】在router/index.js中，routes配置path時，若path格式為: /user/:id 即以【動態路徑引數】冒號 跟一個引數名結束，則匹配到一個路由時，id會被儲存到this.$routes.params中.

  { // src/router/index.js
    path: '/profile/:id',
    component: Profile
  }
 

<template> // profile.vue 
  <div><h2>Profile:{{this.$route.params.id}}</h2></div>
</template>

【2】響應路由引數的變化：導航守衛，簡單說即從user/zhangsan路由到user/lisi，為了保持高效率，vue-router會複用元件，

這會導致元件的生命週期鉤子函式不會被呼叫，如果希望呼叫，則需要導航守衛.【後續再說明】

4. 巢狀路由：

【1】在路由中使用children屬性，其值為一個數組，陣列內是用於配置路由的物件：

  {
    path: '/profile',
    component: Profile,
    children: [
      {
        path: 'news',
        component: News
      }
    ]
  }

【2】神坑：component而不是components，我找bug找了一個小時...

注意點：（1）父路由中path前需要加 '/' ，子路由不需要加 '/'

(2)子路由元件[News]顯示需要在父路由元件[Profile]中新增router-view標籤！

(3)在父路由中如果使用router-link，to的路徑應為完整路徑：'/profile/news'【在Vue Router 4中 to 屬性已被廢棄】