vue-router钩子函数与执行流程-工具盒子

全局守卫 {#全局守卫}

前置守卫 `beforeEach` {#前置守卫-beforeEach}

全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。

|----------------------------------------------------------------------------------------------------------------| | router.beforeEach((to, from, next) => { console.log('to:', to); console.log('from:', from); next(); }) |

beforeEach 全局前置守卫接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由对象
next: Function: 一定要调用该方法不然会阻塞路由

next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。

next()方法的几种情况

next(): 进行管道中的下一个钩子。
next(false): 中断当前的导航。回到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址，可传递的参数与 router.push 中选项一致。
next(error): 导航终止，且该错误会被传递给 router.onError() 注册过的回调。

返回值：

false：取消当前的导航。
null，undefined，true或者直接return：调用下一个导航守卫。

解析守卫 `beforeResolve` {#解析守卫-beforeResolve}

全局解析守卫，在路由跳转前，所有 组件内守卫 和 异步路由组件 被解析之后触发，它同样在 每次导航 时都会触发。

通过 router.beforeResolve 注册一个全局解析守卫：

|---------------------------------------------------------------| | router.beforeResolve((to, from, next) => { next(); }) |

回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

后置守卫 afterEach {#后置守卫-afterEach}

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在 每次导航 时都会触发。

通过 router.afterEach 注册一个全局后置钩子：

|-------------------------------------------------------------------------------------------------| | router.afterEach((to, from) => { console.log('to:', to); console.log('from:', from); }) |

路由独享守卫 `beforeEnter` {#路由独享守卫-beforeEnter}

路由守卫只有一个，就是 beforeEnter，beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。

|--------------------------------------------------------------------------------------------------------------------------------------| | { path: '/a', component: () => import('../components/A.vue'), beforeEnter: (to, from) => { console.log('beforeEnter '); }, } |

组件守卫 {#组件守卫}

beforeRouteEnter {#beforeRouteEnter}

|----------------------------------------------------------------------------------------------------------| | beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ！ // 因为当守卫执行时，组件实例还没被创建！ }, |

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：

|---------------------------------------------------------------------------------| | beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) } |

beforeRouteUpdate {#beforeRouteUpdate}

|----------------------------------------------------------------------------------------| | beforeRouteUpdate (to, from) { // just use `this` this.name = to.params.name } |

beforeRouteLeave {#beforeRouteLeave}

|-----------------------------------------------------------------------------------------------------------------------------------------------------------| | beforeRouteLeave (to, from) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (!answer) return false } |

beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持 传递回调，因为没有必要了