詳細(xì)教程：
Vue Router
菜鳥(niǎo)

基礎(chǔ)

一、 安裝

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 // (縮寫(xiě)) 相當(dāng)于 routes: routes
})

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

2. 路由入口：（兩個(gè)方式）

（1）聲明式，html

//  相當(dāng)于一個(gè)<a/>標(biāo)簽
    <router-link to="/path">Go to Next Page</router-link>

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

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

3. 路由出口

                        <router-view></router-view>

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

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

四、嵌套路由

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

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

六、路由組件傳參

七、h5 history模式

（六七沒(méi)太看懂，不知道在哪用）

進(jìn)階

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