目錄

?

1.導航鉤子的作用

2.導航鉤子的分類

3.全局守衛(wèi)

4.路由獨享守衛(wèi)

5.局部守衛(wèi)

6.路由跳轉(zhuǎn)導航解析流程，當由A路由–>B路由的時候

---

1.導航鉤子的作用

• vue-router提供的導航鉤子主要用來攔截導航，讓它完成跳轉(zhuǎn)或取消。

2.導航鉤子的分類

• 全局守衛(wèi)
• 路由獨享守衛(wèi)
• 局部守衛(wèi)

3.全局守衛(wèi)

是指路由示例上直接操作的鉤子函數(shù)，特點是所有路由配置的組件都會觸發(fā)。簡單點說就是觸發(fā)路由就會觸發(fā)這些鉤子函數(shù)。鉤子函數(shù)執(zhí)行順序包括beforeEach、beforeResolve、afterEach三個。

[beforeEach]：在路由跳轉(zhuǎn)前觸發(fā)，參數(shù)包括to,from,next三個，這個鉤子作用主要是用于登錄驗證，也就是路由還沒跳轉(zhuǎn)提前告知，以免跳轉(zhuǎn)了再通知就為時已晚。

router.beforeEach router.beforeResolve router.afterEachconst router = new VueRouter({ ... });router.beforeEach((to, from, next) => {// do someting});

?

?

• to：代表要進入的目標，它是一個路由對象
• from：代表當前正要離開的路由，同樣也是一個路由對象
• next：這是一個必須需要調(diào)用的方法，而具體的執(zhí)行效果則依賴next方法調(diào)用的參數(shù)

[beforeResolve]：這個鉤子和beforeEach類似，也是路由跳轉(zhuǎn)前觸發(fā)，參數(shù)也是to,from,next三個，和beforeEach區(qū)別官方解釋為：

區(qū)別是在導航被確認之前，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就會被調(diào)用。

即在beforeEach和組件內(nèi)beforeRouteEnter之后，afterEach之后，afterEach之前調(diào)用。

[afterEach]：和beforeEach相反，它是在路由跳轉(zhuǎn)完成之后觸發(fā)，參數(shù)包括to、from，沒有了next，它發(fā)生在beforeEach和beforeResolve之后，beforeRouteEnter(足跡按內(nèi)守衛(wèi))之前。

const router = new VueRouter({ ... });router.beforeEach((to, from, next) => {// do someting});//全局后置鉤子，后置鉤子并沒有 next 函數(shù)，也不會改變導航本身router.afterEach((to, from) => {// do someting});

4.路由獨享守衛(wèi)

是指在單個路由配置的時候也可以設置的鉤子函數(shù)，且只能在這個路由下起作用。其位置如下，也就是像File這樣的組件都存在這樣的鉤子函數(shù)。目前它只有一個鉤子函數(shù)beforeEnter。

[beforeEnter]：和beforeEach完全相同，如果都設置則在beforeEach之后緊隨執(zhí)行，參數(shù)有to、from、next。

cont router = new VueRouter({routes: [{path: '/file',component: File,beforeEnter: (to, from ,next) => {// do someting}}]});

5.局部守衛(wèi)

是指在組件內(nèi)執(zhí)行的鉤子函數(shù)，類似于數(shù)組內(nèi)的生命周期函數(shù)，相當于為配置路由的組件添加的生命周期鉤子函數(shù)。鉤子函數(shù)按執(zhí)行順序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三個，執(zhí)行位置如下：

const File = {template: `<div>This is file</div>`,beforeRouteEnter(to, from, next) {// do someting// 在渲染該組件的對應路由被 confirm 前調(diào)用},beforeRouteUpdate(to, from, next) {// do someting// 在當前路由改變，但是依然渲染該組件是調(diào)用},beforeRouteLeave(to, from ,next) {// do someting// 導航離開該組件的對應路由時被調(diào)用}}

6.路由跳轉(zhuǎn)導航解析流程，當由A路由–>B路由的時候

在A組件里調(diào)用離開守衛(wèi)。 A組件中的beforeRouterLeave

調(diào)用全局的beforeEach守衛(wèi)。 router.beforeEach

再執(zhí)行B路由配置里調(diào)用beforeEnter。

routes:[{path:'/b',component:B,beforeEnter:(to,form,next)=>{..... }}]

4.再執(zhí)行B組件的進入守衛(wèi)。 B組件中beforeRouterEnter
5. 調(diào)用全局的beforeResolve守衛(wèi)(2.5+)。 router.beforeResolve
6. 導航被確認。
7. 調(diào)用全局的afterEach鉤子。 router.afterEach
8. 觸發(fā)DOM更新。

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第九十八篇之vue-router有哪几种导航钩子（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。