导航守卫有哪三种？_导航守卫主要分为-CSDN博客

本文链接：https://blog.csdn.net/dxn16638400024/article/details/134486580

文章介绍了VueRouter中的全局导航守卫，包括beforeEach用于路由切换前的拦截、beforeResolve用于解析阶段的操作以及afterEach用于切换后的清理，展示了如何在路由切换时实现权限验证和通用操作。

摘要由CSDN通过智能技术生成

导航守卫主要分为三种：

全局前置守卫：使用 router.beforeEach 注册，作用是在路由切换开始前进行拦截和处理，可以用来进行一些全局的权限校验、登录状态检查等操作。
全局解析守卫：使用 beforeResolve 注册，作用是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，进行一些操作。
全局后置钩子：使用 afterEach 注册，作用是在导航成功完成后进行一些全局的清理操作，比如页面的埋点统计、日志记录等。

这些导航守卫适用于需要在路由切换过程中做一些额外处理的情况，比如权限控制、页面加载前后的操作等。

以下是一个简单的示例代码：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 在进入 /admin 路由前进行权限校验
        if (user.isAdmin) {
          next(); // 确认跳转
        } else {
          next('/login'); // 重定向到登录页面
        }
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 在每次路由切换前进行全局的拦截处理，比如检查登录状态
  if (to.meta.requiresAuth && !user.isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  // 在每次路由切换后进行全局的清理操作，比如页面埋点统计
  trackPageView(to.path);
});

以上示例展示了如何使用全局前置守卫、全局解析守卫和全局后置钩子对路由进行拦截、处理和清理操作。这些导航守卫能够帮助我们在路由切换时进行额外的控制和操作。