Vue-Router 動態路由匹配
1，路由參數變化(match 模式)
舉例：
const router = new VueRouter({
routes: [
// 動態路徑參數 以冒號開頭， /user/foo 和 /user/bar 都將映射到相同的路由
{ path: '/user/:id', component: User }
]
});
/user/:username/post/:post_id 多個路由變量，也都可以再 this.$route.params中獲取
注意： 從 /user/foo 到 /user/bar組件會被復用，組件不會卸載再加載不會觸發生命周期鈎子，可以使用監聽器監聽 $route 觀察路徑變化，組件內作出正確的響應，2.2版本提供 beforeRouteUpdate 路由鈎子使用此場景
2，匹配任意路徑或導航到404
通配符 路由，有通配符路由的地址，應該放在路由配置后面，保證路由執行順序
{
// 會匹配所有路徑，，用途：放在路由配置最后，，不管輸入什么地址都是不在范圍內，需要轉到404
path: '*'
}
{
// 會匹配以 `/user-` 開頭的任意路徑
path: '/user-*'
}
需要獲取匹配到的路徑的模糊字段值，可以從 params 中的 pathMatch 獲取。
如果是 History模式，跳轉到未知路徑需要報404，因為history模式下路徑會訪問后端發器請求，需要后台服務配合解決404的場景。
高級匹配模式 和 匹配優先級
https://github.com/pillarjs/path-to-regexp#parameters path-to-regexp 匹配一個或多個，匹配一類等高級用法。
優先級: 匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。
3，嵌套路由
路由組件配置中需要增加 children 字段，字段值結構一致，表示子路由路徑。
在index入口的html結構中，div id為app的標簽內使用增加了 <router-view></router-view> 這是頂層視圖出口，一個 <router-view>表示一個視口。
所以，如果需要實現 子路由路徑跳轉切換，就要增加一個 <router-view> 作為新的路由視口，渲染在 children 所在的 component的 <router-view></router-view> 里。
可以path為空會定位到父級根路徑。
編程式的導航
- this.$router.push(location, onComplete, onAbort)
普通的導航跳轉是使用導航鏈接 <router-link>，也可以通過編寫代碼來實現同樣的效果，
this.$router.push 會向history路徑棧中push一個路徑，達到和 router-link一樣的效果。注意： 路徑上需要有對應的參數。
傳參方式: 4中
字符串形式
router.push('home')
對象
router.push({ path: 'home' })
命名的路由
router.push({ name: 'user', params: { userId: '123' }}) 會自動轉換成 /user/123
router.push({ path: `/user/${userId}` }) 只有這兩種方式可以給router傳 params。
以下方式調用無效！！！ 變成 /user 因為不能是path
router.push({ path: 'user', params: { userId: '123' }})
帶查詢參數
router.push({ path: 'register', query: { plan: 'private' }}) query 可以對應 path。 轉換為 /register?plan=private
注意： 以上規則同時適用於 link 的 to 。
push、replace 修改路徑時，會執行回調函數，onComplete（調用完成） onAbort （路由終止）
- this.$router.replace(location, onComplete ?, onAbort ?)
replace 和 push 的區別：
唯一的區別是replace不會向history中添加新的記錄，僅僅是替換掉當前history
- this.$router.go(Integer)
表示history記錄中向前或向后進行多少步。 如果超過history中的步數會靜默失敗。
4，路由命名視圖
具名視圖可以提供視圖分塊的效果，在同一路徑下，對應多個視圖不同組件的更新，一個components中設置的組件跳轉。
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
視圖嵌套：多層嵌套，多個視圖的情況，需要注意 components 中組件的配置，和 router-view 中的name 對齊。
routes: [
{
path: '/',
components: { // 此處有component 單個組件和 多個組件 帶有s的區別
default: Bind,
a: AccountManage,
b: IMManage
}
}]
5，重定向和別名
路徑重定向： 參數類型支持 3 種，字符串，對象，函數返回值
{
path: '/',
redirect: '/newpath',
redirect: { name: 'newpath' },
redircet: to => {
// ....to 僅僅是當前路徑對象的信息，不是路由守衛。
return "/newpath/`${other}`"
}
}
重定向是把一個路徑替換成其他路徑，渲染新的路徑的組件，別名有所不同，設置別名訪問路徑和訪問別名是一樣的。不過，需要注意，alias別名的名稱如果要覆蓋已有路徑規則，需要放在路徑名的配置之前，因為優先級從前向后。
6，路由組件傳參
在組件中直接使用 this.$route.params 會降低組件復用的靈活性，那咋辦？
解耦，將變量以props的形式傳遞給組件。 也更加方便，組件的重用和測試。
大致有 3 種在路由配置中給組件傳遞props的模式：布爾模式，對象模式，函數模式
{
path:'/newsinfo/:content', // 如果不想在地址欄展示參數可以不寫content，
// router.push(name, params) 可以傳參，且不展示在URL。
name:'newsinfo', // router.push(path, query)，可以傳參，格式是?content=value 會展示。
props:true,
component: () =>apply('NewsInfo')
},
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 對於包含命名視圖的路由，分別給每個命名視圖添加 `props` 選項： 處理多視圖公用路由傳參的情況
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
props 除了使用bool型（會將params設置為組件的屬性），還可以使用
對象型（使用對象型，對象作為組件的屬性），
函數型（函數返回值作為組件的屬性，必須盡量保證函數是純函數，只在調用時返回給組件一個可靠的值）