Vue 路由守卫

Vue 路由守卫是 Vue Router 提供的一种功能，允许开发者在路由跳转过程中执行某些逻辑，比如权限验证、数据预加载、导航确认等。这些守卫可以拦截和控制导航流程，确保只有在满足特定条件时才会导航到目标路由。

1. 全局前置守卫 (beforeEach):

   • 这些守卫在每个路由跳转之前都会被调用，可以用于全局性的验证和处理，比如检查用户是否登录，或者在跳转前预加载数据。

2. 全局解析守卫 (beforeResolve):

   • 类似于 beforeEach，但在异步路由组件和异步路由数据解析后调用。

3. 全局后置钩子 (afterEach):

   • 这些守卫在每个路由跳转完成后都会被调用，可以用于一些后置处理，如修改页面标题或记录日志。

4. 路由独享守卫 (beforeEnter):

   • 这种守卫只对某个特定的路由起作用，可以在路由配置中为单个路由定义。

5. 组件内的守卫:

   • 在组件内部定义的守卫，包括：
     • beforeRouteEnter: 在进入该组件对应的路由前调用。
     • beforeRouteUpdate: 当当前路由改变，但是该组件被复用时调用。
     • beforeRouteLeave: 在离开该组件对应的路由前调用。

路由守卫通常接受三个参数：to、from 和 next。to 是目标路由对象，from 是当前导航正要离开的路由对象，next 是一个必须调用的函数，以继续或中断导航过程。

例如，一个简单的全局前置守卫可以这样定义：

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果目标路由要求认证，检查用户是否已登录
    if (!isAuthenticated()) {
      next({ name: 'login' }); // 重定向到登录页面
    } else {
      next(); // 用户已登录，继续导航
    }
  } else {
    next(); // 目标路由不要求认证，继续导航
  }
});

export default router;