什么是导航守卫与应用场景

如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

全局前置守卫

const router = createRouter({ ... })
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收两个参数：

• to: 即将要进入的目标 用一种标准化的方式
• from: 当前导航正要离开的路由 用一种标准化的方式

可以返回的值如下:

• false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。

router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isAuthenticated &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'Login' }
   }
 })

全局后置守卫

可以使用 router.afterEach() 注册一个全局后置守卫，和其他守卫(包括组单个路由独享的守卫以及组件中的守卫)不同的是，全局后置守卫不会接受 next() 函数，也不会改变导航本身；

router.afterEach((to, from) => { // 函数处理代码 })

全局解析守卫

2.5.0 新增。在2.5.0+你可以使用 router.beforeResolve() 注册一个全局解析守卫。

   应用场景

Vue Router 提供的导航守卫主要用来通过跳转或者取消跳转的方式来守卫导航；一个简单的例子：从一个界面跳转到另一个新的界面中，如果需要满足特定的条件才能发生跳转，这时候就需要用到导航守卫(钩子函数)，比如：从商品界面需要跳转到购物车界面，在这个过程中需要用户的登录状态，这样就可以在特定的导航钩子函数中进行判断，跳转还是取消跳转；主要用于登录拦截判断。