vue3中7种路由守卫如何使用

Vue.js 是一种用于构建用户界面的渐进式JavaScript 框架。它提供了一种结构清晰、可读性强且易于维护的方式来编写单页应用程序（SPA）。在 Vue 3 中，路由守卫是一种用于控制导航和访问权限的机制。它允许我们在路由切换前后执行特定的逻辑，比如进行用户身份验证、检查权限或在路由切换时执行一些操作。Vue 3 提供了七种不同的路由守卫，包括全局前置守卫、全局解析守卫、全局后置守卫、路由独享的守卫、异步路由组件、路由元信息和条件导航。

全局前置守卫

全局前置守卫是在路由切换前执行的逻辑。我们可以使用 router.beforeEach() 方法注册一个全局前置守卫。它接收三个参数：to（要进入的路由）、from（要离开的路由）和 next（继续执行的回调函数）。

router.beforeEach((to, from, next) => {
  // 在这里进行身份验证或其他逻辑判断
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 如果未通过验证，则跳转到登录页面
  } else {
    next(); // 继续执行路由切换
  }
});

在上面的例子中，我们通过判断 to.meta.requiresAuth 和 isAuthenticated 变量来检查用户是否已经通过身份验证。如果未通过验证，则使用 next('/login') 跳转到登录页面。如果通过验证，则调用 next() 继续执行路由切换的过程。全局前置守卫是一个非常常用的路由守卫，用于实现用户身份验证、权限控制等功能。

全局解析守卫

全局解析守卫在路由切换之前解析异步数据。我们可以使用 router.beforeResolve() 方法注册一个全局解析守卫。它的用法和全局前置守卫类似，但是它在全局前置守卫之后被调用。

router.beforeResolve((to, from, next) => {
  // 在这里解析异步数据
  fetchData().then(() => {
    next();
  });
});

在上面的例子中，我们可以使用全局解析守卫来加载页面所需的异步数据。在异步数据加载完成之后，调用 next() 继续执行路由切换。全局解析守卫常用于在路由切换之前加载页面所需的数据，以确保页面在渲染之前已经收到了必要的数据。

全局后置守卫

全局后置守卫在路由切换后执行逻辑。我们可以使用 router.afterEach() 方法注册一个全局后置守卫。它接收一个参数：to（要进入的路由）。

router.afterEach((to) => {
  // 在这里执行一些操作
  trackPage(to.path); // 跟踪页面访问量
});

在上面的例子中，我们可以使用全局后置守卫来执行一些操作，比如跟踪页面访问量或发送统计信息。全局后置守卫主要用于在路由切换后执行一些跟踪或统计的操作，与页面的生命周期无关，并且无法阻止路由切换。

路由独享的守卫

路由独享的守卫是针对某个具体路由的守卫，只有在该路由被访问时才会执行。我们可以在路由配置中使用 beforeEnter 字段来注册路由独享的守卫。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      // 在这里进行路由独享的守卫逻辑判断
      if (isAuthenticated) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

在上面的例子中，我们可以在路由配置中的 beforeEnter 字段中注册一个函数作为路由独享的守卫。在这个函数中，我们可以进行一些路由独享的逻辑判断，比如检查用户是否已经通过身份验证。如果通过验证，则调用 next() 继续执行路由切换。如果未通过验证，则调用 next('/login') 跳转到登录页面。路由独享的守卫是用于特定路由的情况下，可以进行更细粒度的权限控制或条件导航。

异步路由组件

Vue 3 支持异步加载路由组件，可以在路由配置中使用 import() 来实现。这可以提高应用程序的性能，只在需要时才加载路由组件。异步路由组件还可以与其他路由守卫结合使用，以实现更灵活的路由操作。

const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
];

在上面的例子中，我们可以使用 import() 函数来异步加载 About.vue 组件。这样在访问 /about 路径时，才会加载 About.vue 组件。异步路由组件可以在一些复杂的场景下提升应用程序的性能，并且可以与其他类型的路由守卫一起使用。

路由元信息

路由元信息是附加在路由上的一些自定义数据。我们可以在路由配置中使用 meta 字段来添加路由元信息。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  }
];

在上面的例子中，我们可以在路由配置中的 meta 字段中添加 requiresAuth 元信息。这个元信息可以在路由守卫中使用，用于进行更细粒度的权限控制或条件导航。比如我们可以在全局前置守卫中检查 requiresAuth 元信息来判断用户是否已经通过身份验证。

条件导航

条件导航是一种根据目标路由的不同进行不同的路由切换操作。我们可以在路由守卫中使用 next() 方法的不同参数来实现条件导航。

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    if (isAuthenticated) {
      next('/dashboard'); // 如果已经登录，则跳转到仪表盘页面
    } else {
      next(); // 继续执行登录页面的路由切换
    }
  } else {
    next(); // 继续执行其他页面的路由切换
  }
});

在上面的例子中，我们可以根据目标路由的不同来执行不同的路由切换操作。如果目标路由是登录页面，并且用户已经通过身份验证，则调用 next('/dashboard') 跳转到仪表盘页面。如果用户未通过身份验证，则调用 next() 继续执行登录页面的路由切换。如果目标路由不是登录页面，则调用 next() 继续执行其他页面的路由切换。条件导航可以根据不同的条件来决定是否跳转到特定页面，提供了更加灵活的路由操作方式。

总结一下，Vue 3 中的路由守卫提供了七种不同的方式来控制导航和访问权限。全局前置守卫、全局解析守卫和全局后置守卫是在路由切换过程中执行的全局逻辑。路由独享的守卫是针对特定路由进行的权限控制和条件导航。异步路由组件可以提升应用程序性能，而路由元信息可以在路由守卫中进行更细粒度的权限控制。条件导航可以根据不同的条件来执行不同的路由切换操作。这些路由守卫的组合使用可以实现复杂的导航控制和访问权限管理。