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

1、vue-router钩子函数根据使用位置可以分为三种类型：

一、全局类型。

二、路由独享类型。

三、组件内的类型。

1、全局前置守卫钩子函数：

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

其中有3个参数：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

next: 一定要调用该方法来 resolve 这个钩子。

2、全局解析守卫钩子函数：

router.beforeResolve((to, from, next) => {  // ...})

和签名全局前置守卫钩子函数一样，也有3个参数，且含义一样：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

next: 一定要调用该方法来 resolve 这个钩子。

和全局前置守卫钩子的区别是：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

3、全局后置钩子函数：

router.afterEach((to, from) => {  // ...})

其中有2个参数：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

由于没有next，所以该钩子函数不会接受 next 函数也不会改变导航本身。

1、路由独享类型其实就是在路由配置上直接定义的beforeEnter守卫钩子函数。

功能和方法参数同全局前置守卫钩子，只是书写的位置不同，作用范围仅限当前路由对象。

3个参数的含义和前面一样：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

next: 一定要调用该方法来 resolve 这个钩子。

1、组件内的类型是指的在路由组件内直接定义的导航守卫钩子函数。

beforeRouteEnter (to, from, next) {

}

3个参数的含义和前面一样：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

next: 一定要调用该方法来 resolve 这个钩子。

但是需要注意，这里不能直接访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建，所以无法获取到新组件的vue实例。

但是可以通过next函数的回调来访问。

如图所示：

2、beforeRouteUpdate (to, from, next) {

}

3个参数的含义和前面一样：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

next: 一定要调用该方法来 resolve 这个钩子。

3、beforeRouteLeave (to, from, next) {

}

3个参数的含义和前面一样：

to:即将要进入的目标 路由对象。

from: 当前导航正要离开的路由。

next: 一定要调用该方法来 resolve 这个钩子。