使用 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）移除该监听，避免内存泄漏
• 注意：该事件不能阻止刷新，也不能执行异步逻辑，仅作兜底提醒

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