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');
});