vue如何实现路由守卫

全局前置守卫

使用 router.beforeEach 可以注册全局前置守卫，在路由跳转前执行逻辑。该方法接收三个参数：to（目标路由）、from（当前路由）、next（回调函数）。通过调用 next() 允许跳转，next(false) 中断跳转，或 next('/login') 重定向到其他路由。

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

路由独享守卫

在路由配置中直接定义 beforeEnter 守卫，仅对当前路由生效。适用于特定路由的权限控制或数据预加载。

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from, next) => {
      if (!user.isAdmin) next('/forbidden');
      else next();
    }
  }
];

组件内守卫

在组件内部通过选项式 API 或组合式 API 定义守卫：

• 选项式 API：使用 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 钩子。
• 组合式 API：通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 函数。

// 选项式 API
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fetchData(); // 访问组件实例
    });
  },
  beforeRouteLeave(to, from, next) {
    if (hasUnsavedChanges) {
      confirm('确认离开？') ? next() : next(false);
    } else next();
  }
};

// 组合式 API
import { onBeforeRouteLeave } from 'vue-router';
onBeforeRouteLeave((to, from, next) => {
  // 处理离开逻辑
});

全局后置钩子

通过 router.afterEach 注册全局后置守卫，常用于日志记录或页面标题修改。注意后置钩子没有 next 参数。

router.afterEach((to, from) => {
  document.title = to.meta.title || '默认标题';
  logRouteAccess(to.path);
});

导航解析流程

路由守卫的执行顺序为：

1. 导航触发
2. 调用失活组件的 beforeRouteLeave
3. 调用全局 beforeEach
4. 在重用的组件中调用 beforeRouteUpdate
5. 调用路由配置的 beforeEnter
6. 解析异步路由组件
7. 调用激活组件的 beforeRouteEnter
8. 调用全局 beforeResolve（2.5+）
9. 导航确认
10. 调用全局 afterEach
11. 触发 DOM 更新
12. 执行 beforeRouteEnter 中传给 next 的回调函数