導航守衛 · FA+Ecloud互聯網應用開發平臺綜合技術入門指南(READ)

## 一、概述導航守衛就是路由跳轉過程中的一些鉤子函數。路由跳轉是一個大的過程，這個大的過程分為跳轉前中后等等細小的過程，在每一個過程中都有一函數，這個函數能讓你操作一些其他的事兒的時機，這就是導航守衛； >[danger] 比如可以用來做權限控制，當我們路由切換到一個組件里面，如果沒有權限，不讓進入，有權限可以進入； ## 二、鉤子分類導航守衛分為全局的、組件內的、單個路由獨享的三種。 1、全局的鉤子，是指路由實例上直接操作的鉤子函數，他的特點是所有路由配置的組件都會觸發，直白點就是觸發路由就會觸發這些鉤子函數： ``` const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...(2) //全局前置守衛 }) router.beforeResolve((to, from, next) => { 　 // ...(6) //全局解析守衛 }) router.afterEach((to, from) => { // ...(7) //全局后置守衛 } ``` 2、組件內的，是指在組件內執行的鉤子函數，類似于組件內的生命周期，相當于為配置路由的組件添加的生命周期鉤子函數： ``` export default { data(){}, beforeRouteEnter (to, from, next) { //....(5) // 在渲染該組件的對應路由被 confirm 前調用 // 不！能！獲取組件實例 `this` // 因為當守衛執行前，組件實例還沒被創建 }, beforeRouteUpdate (to, from, next) { // ... (3) // 在當前路由改變，但是該組件被復用時調用 // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。 // 可以訪問組件實例 `this` }, beforeRouteLeave (to, from, next) { // ... (1) // 導航離開該組件的對應路由時調用 // 可以訪問組件實例 `this` } } ``` 3、路由管道獨享的，是指在單個路由配置的時候也可以設置的鉤子函數： ``` const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...（4） } } ] }) ``` ## 三、守衛回調參數每個守衛方法接收三個參數： to: Route：即將要進入的目標路由對象，該對象有目標頁的路由信息； from: Route：當前導航正要離開的路由，該對象有當前頁的路由信息； >[danger] to，from是一個對象，就是 routes[] 數組里面配置的某個具體的路由對象，比如：to.path, to,name, to.meta 或 from.path, from.name, from.meta 【path,name,meta】這些字段都是自己在路由里面定義的字段； next: Function：他是最重要的一個參數，他相當于佛珠的線，把一個一個珠子逐個串起來。一定要調用該方法來?resolve?這個鉤子。執行效果依賴?next方法的調用參數，以下注意點務必牢記： * next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。 * next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。 * next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。 * next(error): 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。 ## 四、完整的導航解析流程 1. 導航被觸發。 2. 在失活的組件里調用離開守衛。 3. 調用全局的 beforeEach 守衛。 4. 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。 5. 在路由配置里調用 beforeEnter。 6. 解析異步路由組件。 7. 在被激活的組件里調用 beforeRouteEnter。 8. 調用全局的 beforeResolve 守衛 (2.5+)。 9. 導航被確認。 10. 調用全局的 afterEach 鉤子。 11. 觸發 DOM 更新。 12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。