Vue Router导航守卫是控制路由跳转的核心机制，含全局前置守卫（router.beforeEach，用于登录校验等）、全局后置钩子（router.afterEach，用于埋点、滚动重置等）和路由独享守卫（beforeEnter，为特定路由定制拦截）。
Vue Router 的导航守卫是控制路由跳转流程的核心机制，不是“可有可无”的配置，而是权限校验、数据预加载、用户行为追踪等关键逻辑的落脚点。它像一道道关卡，分布在导航的不同阶段，每类守卫职责明确、触发时机固定，用对了能大幅降低业务耦合度。
全局前置守卫：所有跳转必经的第一道检查
通过 router.beforeEach 注册，每次路由变更前都会执行，是最常用、最基础的守卫类型。
- 接收三个参数：to（目标路由）、from（来源路由）、next（必须调用的放行函数）
- 典型用途包括登录态校验、权限拦截、页面访问统计埋点准备
- 必须确保每个分支都调用 next，否则导航会挂起；不能多次调用，否则报错或逻辑错乱
- 示例：限制未登录用户访问 /admin 页面
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login?redirect=' + to.fullPath);
} else {
next();
}
});
全局后置钩子：导航完成后的收尾工作
通过 router.afterEach 注册，不接收 next 参数，也无法改变导航结果，纯属“事后处理”。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 适合关闭全局 loading 动画、上报 PV/UV、更新页面 title、记录用户停留时长
- 注意：不能访问 this，也不参与导航控制，仅作副作用操作
- 示例：每次跳转完成后重置滚动位置并记录路径
router.afterEach((to, from) => {
document.documentElement.scrollTop = 0;
console.log('访问路径:', to.path);
});
路由独享守卫：为特定路径定制拦截逻辑
写在单个路由配置项中的 beforeEnter 函数，只对该路由生效，不污染全局逻辑。
立即学习“前端免费学习笔记（深入）”；
- 参数与全局前置守卫一致，但作用域更小，适合高权限页面（如后台管理页）、灰度功能入口等场景
- 无法访问组件实例，也不能在异步组件加载前执行，若需等待组件就绪，应配合 beforeResolve
- 示例：仅允许管理员角色进入 /settings 页面
{
path: '/settings',
component: Settings,
beforeEnter: (to, from, next) => {
if (getUserRole() !== 'admin') {
next('/403');
} else {
next();
}
}
}
