前言

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

全局守卫

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

前置守卫会在路由导航前触发，我们需要借助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，具体的有以下情况：

// 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：

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

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

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