Vue Router 中的导航守卫有哪些？它们分别在什么情况下触发？

在前端开发中，Vue Router 中的导航守卫是控制路由跳转过程的重要功能。通过导航守卫，我们可以在路由跳转时执行特定的逻辑，如权限检查、异步数据处理等。Vue Router 中主要有三种导航守卫，它们分别是 beforeEach、beforeResolve 和 afterEach。每种导航守卫在不同的时机触发，适用于不同的场景。

1. beforeEach

beforeEach 是在每次路由跳转前执行的导航守卫。它在路由更新之前触发，通常用于全局的路由权限控制或预处理操作。当用户尝试跳转到一个新路由时，beforeEach 会首先被调用。在这个守卫中，你可以决定是否允许导航继续进行，或是重定向到其他路由。

示例代码

router.beforeEach((to, from, next) => {
  // 判断用户是否已登录
  if (!isAuthenticated) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续导航
  }
});

在上面的示例中，beforeEach 用于检查用户是否已登录，如果未登录，则重定向到登录页面。

2. beforeResolve

beforeResolve 是在所有组件内守卫和异步路由组件被解析之后，但在导航被确认之前触发的。它是在导航即将被确认时的最后一步，通常用于执行一些全局的异步操作。在这个守卫中，你可以进行一些需要在组件内守卫解析之后的操作。

示例代码

router.beforeResolve((to, from, next) => {
  // 执行异步操作
  asyncOperation().then(() => {
    next(); // 继续导航
  });
});

在这个示例中，beforeResolve 被用来执行一个异步操作，操作完成后继续导航。

3. afterEach

afterEach 是在导航成功完成后触发的导航守卫。它在导航结束后被调用，因此不能阻止导航的进行。通常用来进行一些后续的操作，比如日志记录、页面统计等。

示例代码

router.afterEach((to, from) => {
  // 记录日志信息
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

在这个示例中，afterEach 被用来记录每次路由跳转的信息。

总结

Vue Router 中的导航守卫为开发者提供了一种灵活的方式来控制路由跳转过程。通过合理使用 beforeEach、beforeResolve 和 afterEach，可以实现复杂的路由控制逻辑，满足不同的业务需求。