开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

前言

路由守卫顾名思义就是守卫当前跳转的路由，根据运行的生命周期，我们可以进行跳转以及取消等操作。常用的场景就是验证登录信息进行相应的路由跳转操作，也可以作为动态keepalive的一种实现方案。

而根据导航守卫的作用域不同，可以分为:全局导航路由守卫、路由独享守卫以及组价路由守卫。而我们今天要说的就是全局导航路由守卫。

全局导航路由守卫

全局导航路由守卫：分全局前置守卫、全局解析守卫和全局后置守卫三种。

全局前置守卫

通过 createRouter()创建一个router实例，并调用其beforeEach可以注册全局前置守卫：

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 传入回调接受参数，
  // 并通过返回值来取消导航或者跳转其他路由
  return false
})

当一个导航触发时，便会调用全局前置守卫，并进入回调获取参数，与此同时，导航会处于一个等待中的状态，直到所有守卫resolve()之后。

回调中接受的参数：

to：将要进入的导航的信息。

from：当前导航的信息。

返回值：

false：取消当前导航。

路由地址：会跳转到返回的路由地址，和router.push()效果类似。

// 常用于登录信息的校验，当登录过期时，可重新跳转到登录页面
router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isLegal &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 当登录过期时，重新登录
     return { name: 'Login' }
   }
 })

当你在某些特定导航跳转的时候，可能会需要进行接口的调用，而一旦涉及到接口，就要进行容错处理。也就是调用接口的时候，可能服务器错误，接口会报错。

这个时候，就会取消导航，并调用 router.onError()注册过的回调。

Vue Router入门指北（三）全局导航守卫

前言

全局导航路由守卫

全局前置守卫