路由守卫阻止页面离开，表单未保存提醒教程

本文详解了如何通过路由守卫与 beforeunload 事件协同工作，实现用户在表单未保存时离开页面（包括刷新、关闭标签页或跳转路由）的智能提醒功能，涵盖表单脏状态精准监听、原生提示兼容处理、Vue/React 框架下可定制的路由拦截方案，以及自动草稿保存、防误触发优化和状态同步等实用技巧，帮助开发者打造既可靠又友好的用户体验。

当用户在表单页面做了修改但还没保存，直接关闭标签页、刷新或跳转到其他路由时，可以通过路由守卫配合页面卸载事件实现“离开前提醒”。核心思路是：监听用户是否修改了表单 → 在路由变化或页面卸载前弹出确认对话框 → 由用户决定是否继续离开。

监听页面表单变更状态

要触发提醒，首先要能判断表单是否“已修改未保存”。常见做法是记录初始值，在输入变化时标记为“已改动”：

• 组件初始化时用 useEffect（React）或 onMounted（Vue）保存表单初始数据快照
• 监听表单项变化（如 input、select、textarea 的 change 或 input 事件），设置一个响应式变量如 isFormDirty = true
• 调用 resetForm() 或保存成功后重置 isFormDirty = false

使用 beforeunload 实现浏览器原生提示

这是最基础、兼容性最好的方式，适用于所有离开场景（刷新、关闭、地址栏输入等）：

• 当 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 标志的更新与清理。只要逻辑闭环，就能让提醒既可靠又友好。

好了，本文到此结束，带大家了解了《路由守卫阻止页面离开，表单未保存提醒教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！