vue-router 鉤子

　　vue-router 導航守衛主要是用來進行一些操做，好比最多見的登陸權限驗證，當用戶知足條件的時候，才讓其進入導航，不然就取消跳轉，並跳到登陸頁面讓其登陸；

　　vue-router 的鉤子包括：全局的鉤子、單個路由獨享的鉤子、組件級的鉤子；

全局守衛

　　全局守衛包括：router.beforeEach、router.beforeResolve、router.afterEach；

　　routerbeforeEach：全局前置守衛，在進入路由以前觸發；

　　router.beforeResolve：全局解析守衛，在 beforeRouterEnter 調用以後調用，是在 2.5.0 版本提出的；

　　router.afterEach：全局後置鉤子，在進入路由以後觸發；

　　使用方法：　　　

import router from './router'; // 引入路由
router.beforeEach((to, from, next) => { 
    next();
});
router.beforeResolve((to, from, next) => {
    next();
});
router.afterEach((to, from) => {
    console.log('afterEach 全局後置鉤子');
});

 　　to 和 from 參數是將要進入和將要離開的路由對象，路由對象是指平時咱們經過 this.$router 獲取到的路由對象；next：function 是個函數，且必需要調用，不然不能進入路由，其中 next() 進入該路由；next(false) 取消進入該路由，url 地址重置爲 from 路由地址，也就是將要離開的路由地址；next 跳轉新路由，當前導航被中斷，從新開始一個新的導航；

　　須要注意的是：next('path地址') 或者 next({path: ''}) 或者 next({name: ''}) 且容許設置諸如 replace: true、name： 'home' 之類的選項，以及在 router-link 或者 router.push 中設置的對象選項；

 

路由獨享守衛

　　路由獨享守衛其實就是咱們在配置路由的時候單獨寫在路由中的守衛，例如：

const router = new VueRouter({
    routes: [
    {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => { 
        // 參數用法什麼的都同樣,調用順序在全局前置守衛後面，因此不會被全局守衛覆蓋
        // ...
        }
    }
    ]
})

 

組件內的守衛

　　組件內的守衛包括：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave；

　　beforeRouteEnter(to，from, next )：進入路由以前觸發；

　　beforeRouteUpdate(to，from, next )：路由複用同一個組件的時候觸發；

　　beforeRouteLeave(to，from, next )：離開當前路由時觸發；

　　　　beforeRouteEnter 在這個鉤子內不能調用 this；由於鉤子在組件實例還沒被建立的時候調用，因此不能獲取組件實例 this，能夠經過傳一個回調給 next 來訪問組件的實例，可是回調的執行時機是在 mounted 後面，因此在這裏其實訪問 this 的意義不是很大；

　　　　beforeRouteLeave 這個鉤子是在導航離開該組件的對應路由時調用，咱們用它來禁止用戶的離開，好比還未報錯一些數據等等，將 setTimeOut、setInterval 等進行銷燬了再離開等等的處理；

路由鉤子函數的錯誤捕捉

若是咱們在全局守衛/路由獨享守衛/組件路由守衛的鉤子函數中有錯誤，能夠這樣捕獲：

router.onError(callback => { 
// 2.4.0新增 並不經常使用，瞭解一下就能夠了 
    console.log(callback, 'callback');
});