路由钩子的使用

vue-router 钩子

　　vue-router 导航守卫主要是用来进行一些操作，比如最常见的登录权限验证，当用户满足条件的时候，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录；

　　vue-router 的钩子包括：全局的钩子、单个路由独享的钩子、组件级的钩子；

全局守卫

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

　　routerbeforeEach：全局前置守卫，在进入路由之前触发；

　　router.beforeResolve：全局解析守卫，在 beforeRouterEnter 调用之后调用，是在 2.5.0 版本提出的；

　　router.afterEach：全局后置钩子，在进入路由之后触发；

　　使用方法：　　　

1 2 3 4 5 6 7 8 9 10

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 中设置的对象选项；

路由独享守卫

　　路由独享守卫其实就是我们在配置路由的时候单独写在路由中的守卫，例如：

1 2 3 4 5 6 7 8 9 10 11 12

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 等进行销毁了再离开等等的处理；

路由钩子函数的错误捕捉

1 2 3 4 5 6

如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误，可以这样捕获： router.onError(callback => { // 2.4.0新增 并不常用，了解一下就可以了     console.log(callback, 'callback'); });