前端只是總結（五）：vue-router鉤子介紹

全局

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

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

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

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

router.beforeEach((to, from, next) => {

})

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

獨享

const router = new VueRouter({
    routes: [
        {
            path: '/login',
            component: login,
            beforeEnter: (to, from, next) => {

            }
        }
    ]
})

參數用法什麼的都一樣,調用順序在全局前置守衛後面，所以不會被全局守衛覆蓋

組件內

data () {
    return {}
},
beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被確認前調用，不能獲取組件示例this，因爲當守衛執行前，組件的實例還沒被創建。
},
beforeRouteUpdate (to, from, next) {
    // 當路由發生改變，但是該組件被複用時調用。也就是路由參數或者查詢改變時。
    // 可以訪問組件this
},
beforeRouteLeave (to, from, next) {
    // 離開該組件的對應路由時調用。
    // 可以訪問組件this
}