詳細教程：
Vue Router
菜鳥

基礎

一、 安裝

npm install vue-router

二、 起步

1. 接入vue-router

Vue.use(VueRouter);
const routes = [
  { path: '/path', component: NextPage },
  { path: '/bar', component: Bar }
]
const router = new VueRouter({
  routes // (縮寫) 相當于 routes: routes
})

// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

2. 路由入口：（兩個方式）

（1）聲明式，html

//  相當于一個<a/>標簽
    <router-link to="/path">Go to Next Page</router-link>

（2）編程式 $router
注意：如果提供了 path，params 會被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數的 path：
添加name，給路由命名，命名路由。

                this.$router.push('/path');
                 // name 命名路由
                this.$router.push({ name: 'user', params: { userId }}) // -> /user/123

3. 路由出口

                        <router-view></router-view>

三、動態(tài)路由匹配

1. 一個“路徑參數”使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。
2. 復用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch (監(jiān)測變化) $route 對象：
3. 捕獲所有路由或 404 Not found 路由，使用通配符 (*)。當使用一個通配符時，$route.params 內會自動添加一個名為 pathMatch 參數。它包含了 URL 通過通配符被匹配的部分。
4. 高級匹配模式； path-to-regexp 作為路徑匹配引擎，所以支持很多高級的匹配模式。
   例子

四、嵌套路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 當 /user/:id 匹配成功，
        // UserHome 會被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其他子路由
      ]
    }
  ]
})

五、命名路由、重定向（redirect）、別名（alias）

六、路由組件傳參

七、h5 history模式

（六七沒太看懂，不知道在哪用）

進階

（略）之后用到在看一下，能看明白，不知道咋用。