1健爬、容易混淆概念：route，routes幔欧，router
1）route罪治，從英文單詞來看就是單數，是一條路由礁蔗，Home按鈕 => home內容觉义， 這是一條route, about按鈕 => about 內容， 這是另一條路由浴井。如：{path: '/home', component: home}是一條路由
2）routes谁撼，是一組路由，把上面的每一條路由組合起來滋饲，形成一個數組厉碟。[{home 按鈕 =>home內容 }， { about按鈕 => about 內容}]屠缭。如：
[{ path: '/home', component: Home },
{ path: '/about', component: About }]
3）router箍鼓， 是一個機制，相當于一個管理者呵曹，它來管理路由款咖。當用戶點擊home 按鈕的時候何暮，怎么辦？這時router 就起作用了铐殃，它到routes 中去查找海洼，去找到對應的 home 內容，所以頁面中就顯示了 home 內容富腊。
2坏逢、vue-router的6種類型
1）動態(tài)路由匹配
我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件赘被。例如是整，我們有一個 User 組件，對于所有 ID 各不相同的用戶民假，都要使用這個組件來渲染浮入，我們可以在vue-router配置“動態(tài)路徑參數”實現：
// 動態(tài)路徑參數 以冒號開頭
{ path: '/user/:id', component: User }
2）嵌套路由
在實際項目中我們會碰到多層嵌套的組件組合而成，但是我們如何實現嵌套路由呢羊异？因此我們需要在 VueRouter 的參數中使用 children 配置事秀。children 是一個數組，并且我們還需要在原來的組件上添加< router-view >來渲染 chlidren 里面的路由野舶。
<template id="b">
<div>
第二個router
<router-view></router-view>
</div>
</template>
<template id="c">
<div>
user:{{ $route.params.id }}
</div>
</template>
{
path:"/two",
component:{template:"#b"},
children:[
{
path:":id",
component:{
template:"#c"
}
}
]
}
3）編程式的導航
除了使用 <router-link> 創(chuàng)建 a 標簽來定義導航鏈接易迹，我們還可以借助 router 的實例方法，通過編寫代碼來實現筒愚。
router.push(location, onComplete?, onAbort?)
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數赴蝇，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是巢掺，它不會向 history 添加新記錄句伶，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
router.go(n)
這個方法的參數是一個整數陆淀，意思是在 history 記錄中向前或者后退多少步考余，類似 window.history.go(n)
// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)
// 后退一步記錄轧苫，等同于 history.back()
router.go(-1)
// 前進 3 步記錄
router.go(3)
// 如果 history 記錄不夠用楚堤，那就默默地失敗唄
router.go(-100)
router.go(100)
4）命名路由
有時我們通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由含懊，或者是執(zhí)行一些跳轉的時候身冬。你可以在創(chuàng)建 Router 實例的時候，在 routes 配置中給某個路由設置名稱岔乔。
我們在路由下定義一個name即可：
var routes = [
{
path:"/one",
name:"one",
component:{template:"#a"}
},
{
path:"/two",
name:"two",
component:{template:"#b"},
},
]
要鏈接到一個命名路由酥筝，可以給 router-link 的 to 屬性傳一個對象：
<router-link :to="{ name: 'one'}">User</router-link>
<router-link :to="{ name: 'two'}">User</router-link>
5）命名視圖
有時候想同時 (同級) 展示多個視圖，而不是嵌套展示雏门，例如創(chuàng)建一個布局嘿歌，有 sidebar (側導航) 和 main (主內容) 兩個視圖掸掏，這個時候命名視圖就派上用場了。
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
一個視圖使用一個組件渲染宙帝，因此對于同個路由丧凤，多個視圖就需要多個組件，components 配置 (帶上 s)：
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
6）重定向和別名
重定向
重定向(Redirect)就是通過各種方法將各種網絡請求重新定個方向轉到其它位置,用于網站調整或網頁被移到一個新地址,它也是通過 routes 配置來完成步脓。例如愿待，從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
別名
/a 的別名是 /b，意味著沪编，當用戶訪問 /b 時呼盆，URL 會保持為 /b年扩，但是路由匹配則為 /a蚁廓，就像用戶訪問 /a 一樣。簡單的說就是給 /a 起了一個外號叫做 /b ,但是本質上還是 /a厨幻。
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
3相嵌、vue-router的使用
使用Vue.js + Vue Router 創(chuàng)建單頁應用，是非常簡單的况脆。我們可以通過組合組件來組成應用程序饭宾，當你要把 Vue Router 添加進來，我們需要做的是格了，將組件 (components) 映射到路由 (routes)看铆，然后告訴 Vue Router 在哪里渲染它們。下面是個基本例子：
1）頁面實現（html模板中）：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
2）js 中配置路由：
// 1. 定義 (路由) 組件盛末。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
// 每個路由應該映射一個組件弹惦。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構造器，
// 或者悄但，只是一個組件配置對象棠隐。
// 我們晚點再討論嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創(chuàng)建 router 實例檐嚣，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單著吧助泽。
const router = new VueRouter({
routes // (縮寫) 相當于 routes: routes
})
// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數注入路由嚎京，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
