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

形如：

const router = new VueRouter({ routes: [{ path: '/user/:id', component: User } ] })

后面的值就是動(dòng)態(tài)匹配的參數(shù)，真正的路由值跳轉(zhuǎn)到冒號(hào)之前的路徑中，：后的值在this.$route.params中，可以在任意組件中被使用。
當(dāng)只有：后的參數(shù)改變的時(shí)候，原來的組件實(shí)例會(huì)被復(fù)用，意味著組建的生命周期不會(huì)再被調(diào)用

如果此時(shí)想要對(duì)參數(shù)的變化做出響應(yīng)，可以watch$router

二、編程式導(dǎo)航

在vue實(shí)例內(nèi)部，可以通過$router訪問路由實(shí)例,可以通過this.$push(...)倆進(jìn)行頁面跳轉(zhuǎn)

跳轉(zhuǎn)有兩種方式：

聲明式跳轉(zhuǎn)：<router-link :to="...">；
編程式跳轉(zhuǎn)：router.push(...)

參數(shù)可以是一個(gè)path路徑，也可以包括params和query參數(shù)

router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供path，則params會(huì)被覆蓋，可以用以下兩種方式替代

router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: /user/${userId} }) // -> /user/123

router.replace和router.push區(qū)別：

push是向前推進(jìn)一個(gè)頁面（真正意義上的跳轉(zhuǎn)，后退會(huì)返回當(dāng)前頁面），replace是替換當(dāng)前頁面（后退會(huì)返回當(dāng)前頁面的上一級(jí)）
router的API大體上和window.history很像，可以參考理解

三、路由優(yōu)先級(jí)

當(dāng)一個(gè)路由可以匹配多個(gè)路由的時(shí)候，此時(shí)，匹配的優(yōu)先級(jí)俺找路由的定義標(biāo)準(zhǔn)，誰先定義的，誰的優(yōu)先級(jí)就越高

四、路由嵌套

路由通常由：路由實(shí)例，路由表，components組成，在項(xiàng)目中這幾部分可以按照需求進(jìn)行拆分，從而有更清晰的結(jié)構(gòu)，當(dāng)我們需要在同級(jí)展示多個(gè)視圖的時(shí)候，我們需要為router-view設(shè)置名字

當(dāng)路由需要進(jìn)行嵌套的時(shí)候，只需要在路由表的頂級(jí)路由中嵌套子路由即可，如下

{ path: '/settings', component: UserSettings, 
children: [
{ path: 'emails', component: UserEmailsSubscriptions }, 
{ path: 'profile', components:
 { default: UserProfile, helper: UserProfilePreview }
 }] }

渲染時(shí)：

<div> <h1>User Settings</h1> <NavBar/> <router-view/> <router-view name="helper"/> </div>

五、路由重定向

有時(shí)我們需要多個(gè)路徑指向同一個(gè)視圖，這時(shí)候就需要用到路由的重定向，一般在路由表的path后加一個(gè)redirect屬性就可以做到

參數(shù)可以是相對(duì)路徑：

const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })

也可以是命名路由

const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })

也可以是一個(gè)方法

const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目標(biāo)路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對(duì)象 }} ] })

路由重定向和路由別名的區(qū)別：

重定向是先訪問到/a，然后路由會(huì)把頁面重定向到/b，跳轉(zhuǎn)了兩次；別名是直接跳轉(zhuǎn)到對(duì)應(yīng)url，只經(jīng)歷一次跳轉(zhuǎn)

六、路由組件傳參

有時(shí)我們?cè)谶M(jìn)行路由跳轉(zhuǎn)的時(shí)候，不可避免的會(huì)遇到需要傳遞參數(shù)的情況，這時(shí)候就需要利用路由進(jìn)行傳參，但在之前我們的參數(shù)都是通過$router.params來進(jìn)行傳遞的，這樣就造成了組件和URL過于耦合，組件只能在特定的url上使用，所以這時(shí)候我們就需要引入props進(jìn)行解綁

const User = { props: ['id'], template: '<div>User {{ id }}</div>' } 
const router = new VueRouter({ 
routes: [ { path: '/user/:id', 
component: User, props: true }, 
// 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
 { path: '/user/:id', 
components: { default: User, sidebar: Sidebar }, 
props: { default: true, sidebar: false } } ] })

七、路由守衛(wèi)

路由守衛(wèi)顧名思義，就是在路由進(jìn)行跳轉(zhuǎn)之前或之后進(jìn)行的判斷，參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)，

它一般分為：全局

1.png

單個(gè)路由獨(dú)享

2.png

組件

3.png

4.png

每個(gè)守衛(wèi)方法都有三個(gè)參數(shù)

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
• from: Route: 當(dāng)前導(dǎo)航正要離開的路由
• next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子

通常情況下登錄路由守衛(wèi)

5.png