使用 onBeforeRouteLeave 结合 isDirty 状态和 UI 库对话框可精准拦截页面离开，支持草稿保存与 beforeunload 兜底提醒。
直接在目标页面组件里用 onBeforeRouteLeave，配合表单“脏状态”判断和异步确认逻辑，就能精准拦截离开行为并提示用户。
只对特定页面启用守卫
不需要全局配置，把守卫写在要保护的页面组件内部即可。比如编辑页 ArticleEdit.vue 中：
- 导入
onBeforeRouteLeave和必要的响应式工具（如ref、watch） - 用一个
isDirty响应式变量标记表单是否被修改过 - 在
onMounted时保存初始数据快照，监听表单字段变化来更新isDirty - 调用
onBeforeRouteLeave，只在isDirty为true时弹出确认
用 UI 组件替代原生 confirm
浏览器原生弹窗样式生硬、无法定制。推荐使用项目已集成的 UI 库（如 Element Plus、Naive UI）的对话框：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 调用
ElMessageBox.confirm或createConfirm，传入自定义标题、文案和按钮文字 - 注意：这些方法返回 Promise，需用
await等待用户操作结果 - 用户点“确定”后调用
next()；点“取消”则调用next(false) - 避免在 Promise 外部直接调用
next()，否则可能跳过等待导致逻辑错乱
支持草稿自动保存再放行
用户点“确定离开”不等于放弃内容——可以先尝试保存草稿，成功后再跳转：
立即学习“前端免费学习笔记（深入）”；
- 在守卫回调中判断
isDirty，若为true则调用保存接口 - 给保存过程加 loading 状态（如
pendingSave = ref(false)），防止重复触发 - 保存成功后调用
next()；失败时可提示错误，并仍允许用户选择是否强制离开 - 保存过程中用户关闭弹窗或切走，需确保 pending 状态能被正确清理，避免阻塞后续导航
兼容页面刷新和关闭场景
路由守卫管不住刷新、关标签页等行为，必须搭配 beforeunload 才完整：
- 当
isDirty为true时，给window添加beforeunload事件监听 - 事件处理器返回任意字符串（如
"您有未保存的更改"），触发浏览器原生提示 - 在组件卸载前（
onUnmounted）移除该监听，避免内存泄漏 - 注意：该事件不能阻止刷新，也不能执行异步逻辑，仅作兜底提醒
