什么是路由守卫vue

路由守卫（Route Guards）是 Vue Router 提供的一种机制，用于在路由导航过程中执行某些逻辑操作。1、确保用户有适当的权限才能访问特定页面；2、在导航之前进行数据预加载；3、在离开页面之前执行清理操作。这些操作可以帮助开发者更好地控制应用的导航逻辑和用户体验。

一、路由守卫的类型

Vue Router 提供了几种不同类型的路由守卫，每种守卫在导航生命周期中的不同阶段被调用：

全局前置守卫（Global Before Guards）：在所有路由导航开始之前被调用。
全局解析守卫（Global Resolve Guards）：在所有异步路由组件解析完成后被调用。
全局后置守卫（Global After Hooks）：在所有路由导航完成之后被调用，但不影响导航本身。
路由独享守卫（Route Exclusive Guards）：在进入某个特定路由之前被调用。
组件内守卫（In-component Guards）：在进入或离开某个特定组件之前被调用。

二、全局前置守卫

全局前置守卫使用 router.beforeEach 注册。它在每次导航之前被调用，可以用来检查用户的认证状态、权限等。

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
  // 检查用户是否已认证
  if (to.meta.requiresAuth && !auth.isAuthenticated()) {
    // 如果未认证，重定向到登录页面
    next({ name: 'login' });
  } else {
    // 继续导航
    next();
  }
});

三、全局解析守卫

全局解析守卫使用 router.beforeResolve 注册。它在所有异步路由组件解析完成后被调用，可以用来执行一些异步操作，例如数据加载。

router.beforeResolve((to, from, next) => {
  // 执行异步操作
  fetchData(to.path).then(() => {
    next();
  }).catch(() => {
    next(false); // 中止导航
  });
});

四、全局后置守卫

全局后置守卫使用 router.afterEach 注册。它在导航完成之后被调用，但不会影响导航本身，通常用来进行一些日志记录或页面分析。

router.afterEach((to, from) => {
  // 记录页面访问
  logPageView(to.path);
});

五、路由独享守卫

路由独享守卫在路由配置中定义，针对特定路由进行守卫操作。

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        // 检查用户权限
        if (hasAccess(to.meta.role)) {
          next();
        } else {
          next('/unauthorized');
        }
      }
    }
  ]
});

六、组件内守卫

组件内守卫直接在组件中定义，主要有 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 三种。

export default {
  name: 'MyComponent',
  beforeRouteEnter(to, from, next) {
    // 在进入路由前调用
    next(vm => {
      // 访问组件实例
      vm.loadData();
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但组件复用时调用
    this.loadData();
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开路由前调用
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('你有未保存的修改，确定要离开吗？');
      if (answer) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  methods: {
    loadData() {
      // 加载数据
    }
  }
};

总结

路由守卫是 Vue Router 提供的一种强大机制，可以在导航过程中执行各种逻辑操作。1、全局前置守卫用于在所有导航之前执行检查；2、全局解析守卫用于在异步组件解析完成后执行操作；3、全局后置守卫用于在导航完成后执行清理或日志记录；4、路由独享守卫用于特定路由的权限检查；5、组件内守卫用于在组件级别控制导航行为。通过合理使用这些守卫，开发者可以更好地控制应用的导航流程，提升用户体验。

为了更好地应用这些知识，可以尝试在项目中结合实际需求进行守卫配置，并通过测试来确保导航逻辑的正确性和合理性。例如，确保用户在未登录的情况下无法访问需要认证的页面，或在离开页面前提示用户保存未保存的修改。