在多步骤表单中，应使用组件内 beforeRouteLeave 守卫拦截未完成步骤的离开操作，结合路由 meta 信息判断步骤顺序与跳过权限，并配合全局 beforeEach 守卫和状态恢复机制，覆盖后退、刷新、地址栏跳转等全场景。
在多步骤表单向导中，用导航守卫拦截未完成步骤的跨越跳转，核心是利用 组件内守卫（尤其是 beforeRouteLeave）捕获“离开当前步骤”的意图，并结合步骤状态做判断，而不是依赖全局守卫——因为用户可能从第2步直接跳到第4步，或通过浏览器后退/前进、地址栏输入等非线性方式跳转。
关键：用 beforeRouteLeave 拦截主动离开当前步骤
该守卫只在当前组件将被卸载前触发，最适合处理“用户正要离开这一步但数据未保存/未校验通过”的场景。
- 它接收
(to, from, next)三个参数，to就是用户想跳去的目标路由 - 你可以在里面检查当前步骤是否已完成（比如表单字段是否填完、校验是否通过）
- 若未完成，调用
next(false)阻止跳转，或next('/step2')强制留在当前步/跳回上一步 - 注意：它不拦截“进入”某个步骤，只拦截“离开”当前步骤；所以每一步组件都需单独定义
配合路由元信息标记步骤顺序与依赖关系
在路由配置中为每个步骤添加 meta 字段，明确步骤序号和是否允许跳过：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
step: 1、step: 2… 方便比对目标路由是否“越级” -
skipable: false表示该步必须完成才能进下一步（如手机号验证页） - 在
beforeEach全局守卫里可补充逻辑：若to.step > from.step + 1且中间某步skipable: false，则next(false)或重定向到阻塞点
处理浏览器原生操作（后退/前进/刷新）
仅靠 beforeRouteLeave 不足以覆盖所有情况：
立即学习“前端免费学习笔记（深入）”；
- 用户点击浏览器后退按钮 → 触发
beforeRouteLeave（仍有效） - 用户刷新页面 → 组件销毁，守卫不触发 → 需在组件
mounted或setup中恢复步骤状态（如从 localStorage 读取） - 用户手动修改地址栏跳转 → 同样走
beforeEach，可用上述元信息逻辑统一拦截
避免重复提示和误拦截的细节
用户可能反复点击“下一步”，但不应每次弹窗确认。建议：
- 设置一个
isStepValidated标志位，仅当该步首次校验失败且用户尝试离开时才拦截 - 对“下一步”按钮的编程式跳转（如
router.push('/step3')），可在跳转前同步校验，成功再跳，减少守卫负担 - 若使用
next(false)，记得配套 UI 提示（如 toast 或模态框），否则用户不知为何卡住
