Vue-router中的導航鈎子

vue-router中的導航鈎子，主要用來作用是攔截導航，讓他完成跳轉或取消。（路由守衛） 原文指路：https://blog.csdn.net/weixin_41399785/article/details/79382243

有三種方式可以植入路由導航過程中：

1. 全局的

2. 單個路由獨享的

3. 組件級

 

（路由守衛為：
全局守衛：beforeEach
后置守衛：afterEach
全局解析守衛：beforeResolve
路由獨享守衛：beforeEnter）

1. 全局導航鈎子：

全局導航鈎子主要有兩種鈎子：前置守衛、后置鈎子，

注冊一個全局前置守衛：

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

 

 

這三個參數 to 、from 、next 分別的作用：

1. to: Route，代表要進入的目標，它是一個路由對象

2. from: Route，代表當前正要離開的路由，同樣也是一個路由對象

3. next: Function，這是一個必須需要調用的方法，而具體的執行效果則依賴 next 方法調用的參數

   • next()：進入管道中的下一個鈎子，如果全部的鈎子執行完了，則導航的狀態就是 confirmed（確認的）
   • next(false)：這代表中斷掉當前的導航，即 to 代表的路由對象不會進入，被中斷，此時該表 URL 地址會被重置到 from 路由對應的地址
   • next(‘/’) 和 next({path: ‘/’})：在中斷掉當前導航的同時，跳轉到一個不同的地址
   • next(error)：如果傳入參數是一個 Error 實例，那么導航被終止的同時會將錯誤傳遞給 router.onError() 注冊過的回調

注意：next 方法必須要調用，否則鈎子函數無法 resolved

對於全局后置鈎子：

router.afterEach((to, from) => {
    // do someting
});

 

 

不同於前置守衛，后置鈎子並沒有 next 函數，也不會改變導航本身

2. 路由獨享的鈎子

顧名思義，即單個路由獨享的導航鈎子，它是在路由配置上直接進行定義的：

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

至於他的參數的使用，和全局前置守衛是一樣的

3. 組建內的導航鈎子

組件內的導航鈎子主要有這三種：beforeRouteEnter、beforeRouteUpdate、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
        // 導航離開該組件的對應路由時被調用
    }
}

需要注意是：

beforeRouteEnter 不能獲取組件實例 this，因為當守衛執行前，組件實例被沒有被創建出來，剩下兩個鈎子則可以正常獲取組件實例 this

但是並不意味着在 beforeRouteEnter 中無法訪問組件實例，我們可以通過給 next 傳入一個回調來訪問組件實例。在導航被確認時，會執行這個回調，這時就可以訪問組件實例了，如：

beforeRouteEnter(to, from, next) {
    next (vm => {
        // 這里通過 vm 來訪問組件實例，解決了沒有 this 的問題
    })
}

注意，僅僅是 beforRouteEnter 支持給 next 傳遞回調，其他兩個並不支持。因為歸根結底，支持回調是為了解決 this 問題，而其他兩個鈎子的 this 可以正確訪問到組件實例，所有沒有必要使用回調

最后是完整的導航解析流程：

1.導航被觸發

2.在失活的組件里調用離開守衛

3.調用全局的 beforeEach 守衛

4.在重用的組件里調用 beforeRouteUpdate 守衛

5.在路由配置里調用 beforEnter

6.解析異步路由組件

7.在被激活的組件里調用 beforeRouteEnter

8.調用全局的 beforeResolve 守衛

9.導航被確認

10.調用全局的 afterEach 鈎子

11.觸發 DOM 更新

12.在創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數

 

一個栗子： https://blog.csdn.net/qq_39559955/article/details/81044342