Vue Router官网

vue-router 钩子函数(路由拦截)

有的时候,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录

全局路由钩子

beforeEach, afterEach, beforeResolve

router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
router.beforeEach((to, from, next) => {
console.log(to,from)
if(to.matched.some(res => res.meta.requireAuth)) {
// 判断是否需要登录权限 && 判断是否登录
} else {
next()
}
})

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

router.afterEach((to, from) => {
//会在任意路由跳转后执行
// 不接受next函数
console.log('afterEach')
})
  • to, from, 路由对象指的是平时通过this.$route获取到的路由对象
  • next()
  • next(false) url 不跳转
  • next 跳转新路由,当前的导航被中断,重新开始一个新的导航
    1
    2
    3
    我们可以这样跳转:next('path地址')或者next({path:''})或者next({name:''})
    且允许设置诸如 replace: true、name: 'home' 之类的选项
    以及你用在router-link或router.push的对象选项。

单个路由钩子

只有beforeEnter,在进入前执行,to参数就是当前路由

1
2
3
4
5
6
7
8
9
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]

组件内路由钩子

beforeRouteEnter, beforeRouteUpdate(2.2), beforeRouteLeave

beforeRouteEnter 不能获取组件实例 this,因为当守卫执行前,组件实例被没有被创建出来,剩下两个钩子则可以正常获取组件实例 this

  • beforeRouteEnter获取到this实例, 可以通过传一个回调给next来访问组件实例
    1
    2
    3
    4
    5
    beforeRouteEnter (to, from, next) {
    next(vm => {
    // 通过 `vm` 访问组件实例
    })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1/foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}

完整的路由导航解析流程(不包括其他生命周期)

  • 触发进入其他路由。
  • 调用要离开路由的组件守卫beforeRouteLeave
  • 调用局前置守卫:beforeEach
  • 在重用的组件里调用 beforeRouteUpdate
  • 调用路由独享守卫 beforeEnter。
  • 解析异步路由组件。
  • 在将要进入的路由组件中调用beforeRouteEnter
  • 调用全局解析守卫 beforeResolve
  • 导航被确认。
  • 调用全局后置钩子的 afterEach 钩子。
  • 触发DOM更新(mounted)。
  • 执行beforeRouteEnter 守卫中传给 next 的回调函数

欢迎访问我的博客  地址      
https://blog.afacode.top