可通过路由守卫配合beforeunload事件实现离开前提醒：监听表单变更设isFormDirty为true，beforeunload触发浏览器原生提示，路由守卫（Vue的beforeRouteLeave或React的useBlock）拦截跳转并自定义提示，再辅以草稿保存和状态同步优化体验。
当用户在表单页面做了修改但还没保存，直接关闭标签页、刷新或跳转到其他路由时，可以通过路由守卫配合页面卸载事件实现“离开前提醒”。核心思路是：监听用户是否修改了表单 → 在路由变化或页面卸载前弹出确认对话框 → 由用户决定是否继续离开。
监听页面表单变更状态
要触发提醒，首先要能判断表单是否“已修改未保存”。常见做法是记录初始值，在输入变化时标记为“已改动”：
- 组件初始化时用 useEffect（React）或 onMounted（Vue）保存表单初始数据快照
- 监听表单项变化（如 input、select、textarea 的 change 或 input 事件），设置一个响应式变量如 isFormDirty = true
- 调用 resetForm() 或保存成功后重置 isFormDirty = false
使用 beforeunload 实现浏览器原生提示
这是最基础、兼容性最好的方式，适用于所有离开场景（刷新、关闭、地址栏输入等）：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 当 isFormDirty 为 true 时，给 window 绑定 beforeunload 事件
- 在事件回调中返回任意字符串（现代浏览器会忽略内容，只显示统一提示语）
- 注意：该事件无法自定义弹窗样式，且不能在异步操作中延迟执行
- 离开前需手动移除监听，避免内存泄漏（尤其在单页应用路由切换时）
结合路由守卫做精准拦截（Vue Router / React Router）
前端路由跳转可被守卫捕获，比 beforeunload 更可控：
- Vue Router：在 beforeEach 或组件内 beforeRouteLeave 中检查 isFormDirty，调用 next(false) 阻止跳转，并弹出 ElMessage 或 confirm 提示
- React Router v6.4+：使用 useBlock Hook，传入条件函数（如 isFormDirty）和自定义提示文案；用户确认后调用 proceed() 继续导航
- 注意：路由守卫不覆盖关闭/刷新行为，需与 beforeunload 配合使用才完整
增强体验的小技巧
避免打扰用户，同时确保关键数据不丢失：
- 仅对「有实际变更」的字段触发 dirty 状态，忽略空格、大小写等非实质性修改
- 自动保存草稿：用户停留超过 30 秒且未提交，可将表单序列化存入 localStorage，下次进入时恢复
- 在页面显眼位置加一个微提示（如顶部横幅）：“您有未保存的更改”，并附“保存”按钮，降低用户焦虑
- 禁用提交按钮期间，也应同步设为 isFormDirty = false，防止重复提醒
不复杂但容易忽略的是状态同步时机——表单修改、保存成功、路由跳转、页面卸载这四个节点必须严格对应 dirty 标志的更新与清理。只要逻辑闭环，就能让提醒既可靠又友好。
