Vue Router学习(十一)——全局导航守卫

前言

上节我们解析了路由传参过程的源码,跟前面几节结合一下,相当于把路由导航的全过程简单分析了一下。除了在导航组件内做操作,我们还能在路由导致跳转前后执行某些操作,此时就需要借助导航守卫,本节就来学习一下全局导航守卫。

全局守卫

全局守卫相当于所有路由都会执行的函数,在项目中开发中全局守卫必不可少,比如我们可以用全局守卫设置白名单,达到菜单权限控制,登录等操作都可以放到全局守卫中。全局守卫有三种,下面我们一起来看下。

前置守卫

前置守卫会在路由导航前触发,我们需要借助router实例化对象中的beforeEach注册一个前置守卫

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

前置守卫有三个参数:

  • to表示导航到的路由,
  • from表示离开的路由。
  • next是一个函数,next在vue router3.x版本中是必须要执行next()函数,表示resolve以此达到导航的目的,而在4.x版本中next变为了可选参数,我们可以直接通过return来resolve守卫。注意如果我们使用了next,要确保next严格调用一次
router.beforeEach((to, from) => {
//不会被解析或报错
next()
next(false)
})

上面提到了现在前置守卫可以直接return,具体的有以下情况:

  • 返回false,导航就会被取消,页面会跳转到from的路由。注意这里面说的是重置,页面依旧会刷新。
  • 返回true或undefinde,此时守卫就会正常执行结束,页面也会正常导航。
  • 路由地址,导航到其他地址,我们可以通过router.push方法改变to的地址,此时会生成一个新的导航,from依旧是之前的地址,而to就会变成新地址。
// to为A from为B
router.beforeEach((to, from) => {
 retrun router.push({name:'C'})
 })
 //新的导航to为C,from为B

beforeEach参数名称为guard具体的ts类型为NavigationGuardWithThis:
Vue Router学习(十一)——全局导航守卫

解析守卫

解析守卫会在进入导航前触发,它执行的时机在导航过程中,更准确的执行时机我们可以看下面官网的解释。在此守卫我们可以获取一些路由信息或者处理一些信息,我们利用router.beforeResolve注册一个解析守卫。

router.beforeResolve(to => { 
})

beforeResolve参数的ts类型跟beforeEach是一样的:

Vue Router学习(十一)——全局导航守卫

后置钩子

后置钩子在导航后触发,之所以后置不叫守卫,因为后置钩子不会改变路由再进行路由。我们可以通过router.afterEach声明一个后置钩子。

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

该钩子函数的参数就有三个to、from、failure,参数的ts类型为NavigationHookAfter

Vue Router学习(十一)——全局导航守卫
failure为可选参数,表示导航故障,它是一个error实例,里面包含着错误信息,我们可以返回的信息分析错误原因。failure参数的ts类型为NavigationFailure。
Vue Router学习(十一)——全局导航守卫

总结

以上就是Vue Router的全局导航守卫,日常开发中前置守卫配合后置钩子就能满足我们大部分需求了。这些钩子函数拓展了我们对导航的操作,让路由之间的导航功能更加丰富。需要注意next参数在4.x中有了小改动,在使用时要看清版本。

原文链接:https://juejin.cn/post/7352549946266157071 作者:躺平使者

(0)
上一篇 2024年4月1日 上午11:03
下一篇 2024年4月1日 上午11:13

相关推荐

发表评论

登录后才能评论