Vue3 中 7 种路由守卫的使用方法

在 Vue3 开发中，路由守卫是非常重要的一部分，它能帮助我们在路由切换的不同阶段进行各种逻辑处理。下面就来详细介绍 Vue3 中的 7 种路由守卫及其使用方法。

全局前置守卫

全局前置守卫使用 router.beforeEach 方法定义。它会在每次路由切换前被调用，接收 to、from 和 next 三个参数。to 是即将进入的目标路由对象，from 是当前导航正要离开的路由，next 函数用于控制路由的跳转。例如，进行权限验证：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth &&!isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

全局解析守卫

通过 router.beforeResolve 定义，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用，常用于在数据解析完成后再进行路由跳转。

全局后置守卫

使用 router.afterEach 定义，在路由切换完成后调用，接收 to 和 from 两个参数，可用于记录页面访问日志等操作：

router.afterEach((to, from) => {
  console.log(`从 ${from.path} 跳转到 ${to.path}`);
});

路由独享守卫

在路由配置对象中使用 beforeEnter 定义，只作用于当前路由。例如：

{
  path: '/admin',
  component: AdminComponent,
  beforeEnter: (to, from, next) => {
    // 逻辑处理
    next();
  }
}

组件内守卫

在组件内部定义，有 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。beforeRouteEnter 在进入组件前调用，beforeRouteUpdate 在路由参数变化时调用，beforeRouteLeave 在离开组件时调用，可用于询问用户是否保存未提交的数据等场景。

掌握这 7 种路由守卫的使用方法，能让我们在 Vue3 项目中更灵活地控制路由切换逻辑，提升应用的用户体验和安全性。