目錄

?

1.導航鉤子的作用

2.導航鉤子的分類

3.全局守衛

4.路由獨享守衛

5.局部守衛

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

---

1.導航鉤子的作用

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

2.導航鉤子的分類

• 全局守衛
• 路由獨享守衛
• 局部守衛

3.全局守衛

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

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

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

?

?

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

[beforeResolve]：這個鉤子和beforeEach類似，也是路由跳轉前觸發，參數也是to,from,next三個，和beforeEach區別官方解釋為：

區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就會被調用。

即在beforeEach和組件內beforeRouteEnter之后，afterEach之后，afterEach之前調用。

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

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

4.路由獨享守衛

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

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

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

5.局部守衛

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

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

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

在A組件里調用離開守衛。 A組件中的beforeRouterLeave

調用全局的beforeEach守衛。 router.beforeEach

再執行B路由配置里調用beforeEnter。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。