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），防止内存泄漏
• 注意：现代浏览器对这个提示语有限制，实际显示文案由浏览器决定，不能自定义

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！