Vue路由守卫实现“表单未保存时离开确认”，需用onBeforeRouteLeave监听跳转、isDirty标志脏检查、ElMessageBox优化弹窗，并补充beforeunload处理刷新/关闭场景。
Vue 路由守卫实现“表单未保存时离开确认”，核心是用组件级守卫 onBeforeRouteLeave（Vue 3）或 beforeRouteLeave（Vue 2），配合表单脏检查（isDirty）和用户交互控制跳转逻辑。
监听表单是否被修改
必须先判断用户是否真有未保存的改动，否则每次离开都弹窗会严重干扰体验。常见做法：
- 初始化时保存表单原始值（如 initialForm = { ...form.value }）
- 使用 watch 深监听表单变化，对比当前值与初始值，更新 isDirty 状态
- 也可用防抖 + 标志位方式：输入后 300ms 设为 true，避免高频触发
在组件内注册离开前守卫
Vue 3 中推荐使用组合式 API 的 onBeforeRouteLeave：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 它只在当前组件激活时生效，不污染全局逻辑
- 接收三个参数：to（目标路由）、from（当前路由）、next（必须调用的回调）
- 仅当 isDirty.value === true 时才介入，避免无意义拦截
弹出确认并控制导航行为
不能直接用原生 confirm()，应结合 UI 组件（如 Element Plus 的 ElMessageBox）提升体验：
立即学习“前端免费学习笔记（深入）”；
- 调用弹窗后，next(false) 暂停导航；用户点“确定”再调 next() 放行
- 若需异步保存草稿，可在弹窗确认后先发请求，成功后再 next()；失败则保留当前页并提示错误
- 注意：必须确保 next() 只被调用一次，否则导航会卡死
补充页面卸载场景（关闭/刷新）
路由守卫管不了浏览器关闭、F5 刷新、地址栏输入等行为，需额外监听 beforeunload：
- 当 isDirty 为 true 时，设置 window.onbeforeunload = () => '您有未保存的内容'
- 离开后记得清理该监听（比如在 onUnmounted 中设为 null），防止内存泄漏
- 注意：现代浏览器对这个提示语有限制，实际显示文案由浏览器决定，不能自定义
