詳解vue-router 中的導航鉤子

vue-router 的導航鉤子，主要做用是攔截導航，讓他完成跳轉或取消。

有三種方式能夠植入路由導航過程當中：

• 全局的
• 單個路由獨享的
• 組件級的

1. 全局導航鉤子：

　　 全局導航鉤子主要有兩種鉤子：前置守衛、後置鉤子， 註冊一個全局前置守衛：

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

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

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

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

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

　　 next()：進入管道中的下一個鉤子，若是所有的鉤子執行完了，則導航的狀態就是 confirmed（確認的）

　　 next(false)：這表明中斷掉當前的導航，即 to 表明的路由對象不會進入，被中斷，此時該表 URL 地址會被重置到 from 路由對應的地址

　　next(‘/’) 和 next({path: ‘/’})：在中斷掉當前導航的同時，跳轉到一個不一樣的地址

　　 next(error)：若是傳入參數是一個 Error 實例，那麼導航被終止的同時會將錯誤傳遞給 router.onError() 註冊過的回調

　　注意：next 方法必需要調用，不然鉤子函數沒法 resolved，不一樣於前置守衛，後置鉤子並無 next 函數，也不會改變導航自己。

 2. 路由獨享的鉤子

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

 1 cont router = new VueRouter({
 2     routes: [
 3         {
 4             path: '/file',
 5             component: File,
 6             beforeEnter: (to, from ,next) => {
 7                 // do someting
 8             }
 9         }
10     ]
11 });
12 // 至於他的參數的使用，和全局前置守衛是同樣的

 3. 組件內的導航鉤子 組件內的導航鉤子主要有這三種：

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內部直接進行定義的:

 1 const File = {
 2     template: `<div>This is file</div>`,
 3     beforeRouteEnter(to, from, next) {
 4         // do someting
 5         // 在渲染該組件的對應路由被 confirm 前調用
 6     },
 7     beforeRouteUpdate(to, from, next) {
 8         // do someting
 9         // 在當前路由改變，可是依然渲染該組件是調用
10     },
11     beforeRouteLeave(to, from ,next) {
12         // do someting
13         // 導航離開該組件的對應路由時被調用
14     }
15 }

須要注意是： beforeRouteEnter 不能獲取組件實例 this，由於當守衛執行前，組件實例被沒有被建立出來，剩下兩個鉤子則能夠正常獲取組件實例 this 可是並不意味着在 beforeRouteEnter 中沒法訪問組件實例，咱們能夠經過給 next 傳入一個回調來訪問組件實例。在導航被確認是，會執行這個回調，這時就能夠訪問組件實例了，如：

1 beforeRouteEnter(to, from, next) {
2     next (vm => {
3         // 這裏經過 vm 來訪問組件實例解決了沒有 this 的問題
4     })
5 }

 注意，僅僅是 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 的回調函數