一楞慈、動態(tài)路由匹配
形如：
const router = new VueRouter({ routes: [{ path: '/user/:id', component: User } ] })
后面的值就是動態(tài)匹配的參數(shù)，真正的路由值跳轉(zhuǎn)到冒號之前的路徑中啃擦，：后的值在this.$route.params中囊蓝，可以在任意組件中被使用。
當(dāng)只有：后的參數(shù)改變的時候令蛉，原來的組件實例會被復(fù)用聚霜，意味著組建的生命周期不會再被調(diào)用
如果此時想要對參數(shù)的變化做出響應(yīng)，可以watch$router
二珠叔、編程式導(dǎo)航
在vue實例內(nèi)部蝎宇，可以通過$router訪問路由實例,可以通過this.$push(...)倆進行頁面跳轉(zhuǎn)
跳轉(zhuǎn)有兩種方式：
聲明式跳轉(zhuǎn)：<router-link :to="...">；
編程式跳轉(zhuǎn)：router.push(...)
參數(shù)可以是一個path路徑祷安，也可以包括params和query參數(shù)
router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供path姥芥，則params會被覆蓋，可以用以下兩種方式替代
router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path:
/user/${userId}}) // -> /user/123
router.replace和router.push區(qū)別：
push是向前推進一個頁面（真正意義上的跳轉(zhuǎn)辆憔，后退會返回當(dāng)前頁面）撇眯，replace是替換當(dāng)前頁面（后退會返回當(dāng)前頁面的上一級）
router的API大體上和window.history很像，可以參考理解
三虱咧、路由優(yōu)先級
當(dāng)一個路由可以匹配多個路由的時候熊榛，此時，匹配的優(yōu)先級俺找路由的定義標準腕巡，誰先定義的玄坦，誰的優(yōu)先級就越高
四、路由嵌套
路由通常由：路由實例绘沉，路由表煎楣，components組成，在項目中這幾部分可以按照需求進行拆分车伞，從而有更清晰的結(jié)構(gòu)择懂，當(dāng)我們需要在同級展示多個視圖的時候，我們需要為router-view設(shè)置名字
當(dāng)路由需要進行嵌套的時候另玖，只需要在路由表的頂級路由中嵌套子路由即可困曙，如下
{ path: '/settings', component: UserSettings,
children: [
{ path: 'emails', component: UserEmailsSubscriptions },
{ path: 'profile', components:
{ default: UserProfile, helper: UserProfilePreview }
}] }
渲染時：
<div> <h1>User Settings</h1> <NavBar/> <router-view/> <router-view name="helper"/> </div>
五、路由重定向
有時我們需要多個路徑指向同一個視圖谦去，這時候就需要用到路由的重定向慷丽，一般在路由表的path后加一個redirect屬性就可以做到
參數(shù)可以是相對路徑：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
也可以是命名路由
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })
也可以是一個方法
const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目標路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對象 }} ] })
路由重定向和路由別名的區(qū)別：
重定向是先訪問到/a，然后路由會把頁面重定向到/b鳄哭，跳轉(zhuǎn)了兩次要糊；別名是直接跳轉(zhuǎn)到對應(yīng)url，只經(jīng)歷一次跳轉(zhuǎn)
六妆丘、路由組件傳參
有時我們在進行路由跳轉(zhuǎn)的時候锄俄，不可避免的會遇到需要傳遞參數(shù)的情況局劲，這時候就需要利用路由進行傳參，但在之前我們的參數(shù)都是通過$router.params來進行傳遞的珊膜，這樣就造成了組件和URL過于耦合容握，組件只能在特定的url上使用宣脉，所以這時候我們就需要引入props進行解綁
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 } } ] })
七、路由守衛(wèi)
路由守衛(wèi)顧名思義塑猖，就是在路由進行跳轉(zhuǎn)之前或之后進行的判斷竹祷，參數(shù)或查詢的改變并不會觸發(fā)進入/離開的導(dǎo)航守衛(wèi)，
它一般分為：全局
單個路由獨享
組件
每個守衛(wèi)方法都有三個參數(shù)
- to: Route: 即將要進入的目標 路由對象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子
通常情況下登錄路由守衛(wèi)
