Vue路由守衛(wèi)

路由守衛(wèi)的作用：

控制路由的跳轉(zhuǎn)，在什么時(shí)候跳轉(zhuǎn)或者不跳轉(zhuǎn)，是否符合進(jìn)入該路由的條件，符合即可以進(jìn)入該路由，不符合那就不讓進(jìn)入該路由（也就是顯示不了這個(gè)路由對(duì)應(yīng)的組件或者頁(yè)面）

常用場(chǎng)景：?登錄（當(dāng)本地存在token值的時(shí)候，說明已登錄，進(jìn)入登錄頁(yè)面的時(shí)候直接跳回首頁(yè)；當(dāng)本地沒有token值的時(shí)候，說明沒有登錄，要想進(jìn)入應(yīng)用的某個(gè)需要登錄的頁(yè)面，此時(shí)就需要導(dǎo)航守衛(wèi)判斷，未登錄就直接跳轉(zhuǎn)到登錄頁(yè)）

vue-router提供了導(dǎo)航鉤子:全局前置導(dǎo)航鉤子 beforeEach和全局后置導(dǎo)航鉤子 afterEach，他們會(huì)在路由即將改變前和改變后進(jìn)行觸發(fā)。所以判斷用戶是否登錄需要在beforeEach導(dǎo)航鉤子中進(jìn)行判斷。

導(dǎo)航鉤子有3個(gè)參數(shù)：

? 1、to:即將要進(jìn)入的目標(biāo)路由對(duì)象；

? 2、from:當(dāng)前導(dǎo)航即將要離開的路由對(duì)象；

? 3、next ：調(diào)用該方法后，才能進(jìn)入下一個(gè)鉤子函數(shù)（afterEach）。

? ? ? ? next( )? //直接進(jìn)to 所指路由 顯示
? ? ? ? next(false)? //中斷當(dāng)前路由 不顯示
? ? ? ? next('route')? //跳轉(zhuǎn)指定路由
? ? ? ? next('error')? //跳轉(zhuǎn)錯(cuò)誤路由

路由守衛(wèi)的三種寫法，視情況使用哪種方式，簡(jiǎn)單常用的就是全局寫法：

1. 全局（寫在路由文件中/main.js中都可以）to的使用：

router.beforeEach( (?to,from,next?){ } )

2. 獨(dú)享守衛(wèi)--單個(gè)路由（寫在單個(gè)路由配置中）：

BeforeEnter：（to，from，next）=>{ }

3. 單個(gè)組件中 :

beforeRouteEnter(to,from,next){ }

（以鉤子函數(shù)寫在組件中，注意，在路由進(jìn)入之前，組件實(shí)例還未渲染，所以無法獲取this實(shí)例，只能通過vm來訪問組件實(shí)例 next(vm => {}) }）from的使用：

例如，要進(jìn)入登錄這個(gè)組件，如果是從首頁(yè)進(jìn)入，那就能進(jìn)入，放行next（true）；

如果不是從首頁(yè)進(jìn)的，那就不讓進(jìn)入登錄頁(yè)next（false）；