vue-router钩子函数的使用方法

vscode

vue/cli

全局前置守卫钩子函数：router.beforeEach((to, from, next) => {  // ...})其中有3个参数：to:即将要进入的目标 路由对象。from: 当前导航正要离开的路由。next: 一定要调用该方法来 resolve 这个钩子。

全局解析守卫钩子函数：router.beforeResolve((to, from, next) => {  // ...})和签名全局前置守卫钩子函数一样，也有3个参数，且含义一样：to:即将要进入的目标 路由对象。from: 当前导航正要离开的路由。next: 一定要调用该方法来 resolve 这个钩子。和全局前置守卫钩子的区别是：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子函数：router.afterEach((to, from) => {  // ...})其中有2个参数：to:即将要进入的目标 路由对象。from: 当前导航正要离开的路由。由于没有next，所以该钩子函数不会接受 next 函数也不会改变导航本身。

组件内的类型是指的在路由组件内直接定义的导航守卫钩子函数。beforeRouteEnter (to, from, next) {}3个参数的含义和前面一样：to:即将要进入的目标 路由对象。from: 当前导航正要离开的路由。next: 一定要调用该方法来 resolve 这个钩子。 但是需要注意，这里不能直接访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建，所以无法获取到新组件的vue实例。但是可以通过next函数的回调来访问。如图所示：

beforeRouteUpdate (to, from, next) {}3个参数的含义和前面一样：to:即将要进入的目标 路由对象。from: 当前导航正要离开的路由。next: 一定要调用该方法来 resolve 这个钩子。

beforeRouteLeave (to, from, next) {}3个参数的含义和前面一样：to:即将要进入的目标 路由对象。from: 当前导航正要离开的路由。next: 一定要调用该方法来 resolve 这个钩子。