全局前置守卫最先触发，router.beforeEach在路由跳转初始即执行，不依赖组件加载或路由解析完成，用于登录态检查、权限拦截等；随后是路由独享守卫beforeEnter，仅对当前路由生效；接着是组件内守卫onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeave；最后是全局解析守卫beforeResolve和后置守卫afterEach，分别用于放行前确认和导航完成后的副作用操作。
全局前置守卫最先触发
路由跳转一开始，router.beforeEach 就会执行。它不依赖组件是否加载、也不等待路由配置解析完成，是整个导航流程的“第一道安检口”。
典型用途包括：检查登录态（读 localStorage/token）、拦截未授权访问、设置页面加载状态。
- 参数 to 是目标路由对象（含 path、name、meta 等）
- 参数 from 是当前离开的路由对象
- 必须调用 next()，否则导航卡死；可传参控制走向：
next()、next('/login')、next(false)、next(error) - 支持基于
to.meta.requireAuth这类元信息做细粒度判断，避免硬编码路径
路由独享守卫紧随其后
在全局前置守卫通过后，若目标路由配置中定义了 beforeEnter，它就会被调用。这个守卫只对当前这一个路由生效，适合做页面级权限校验或特殊准入逻辑。
比如管理员后台页可这样写：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
{ path: '/admin', component: Admin, beforeEnter: (to, from, next) => { const role = localStorage.getItem('role') if (role !== 'admin') next('/403') else next() } }
- 它比组件内守卫早执行，且无法访问组件实例
- 不参与组件复用场景（如参数变化但组件没销毁），只在新路由匹配时触发
- 可与 meta 配合，实现“声明式权限”：仅需加
meta: { roles: ['admin'] }，再统一在 beforeEnter 中校验
组件内守卫按生命周期阶段介入
当路由确认要进入某个组件时，对应的组件守卫才会运行。Vue 3 中推荐使用组合式 API 的 onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeave。
-
onBeforeRouteEnter：组件尚未创建，不能访问
this或setup中的响应式数据；但可通过next(vm => {...})延迟到挂载后执行 - onBeforeRouteUpdate：仅在当前组件复用（如 /user/1 → /user/2）时触发，适合重新拉取参数相关数据
- onBeforeRouteLeave：用户准备离开当前组件时调用，常用于防误操作，例如弹窗提示“表单未保存”
全局解析与后置守卫收尾
在所有组件守卫和异步组件加载完成后，router.beforeResolve 会执行——这是最后一次“放行前确认”，适合做数据预加载兜底校验。
最后，router.afterEach 在导航完全完成、DOM 渲染完毕后触发，它不接收 next，只用于副作用操作：
- 更新页面标题（
document.title = to.meta.title） - 埋点统计（上报 PV、停留时长）
- 关闭全局 loading 动画
- 滚动行为重置（
window.scrollTo(0, 0)）
