beforerouteleave（vue 2）或onbeforerouteleave（vue 3）是实现页面离开前确认的核心守卫，需配合isdirty状态、深拷贝初始数据、异步弹窗及next()控制导航；还需叠加beforeunload事件覆盖刷新/关闭等场景。
在 Vue Router 中，组件内守卫 beforeRouteLeave（Vue 2）或 onBeforeRouteLeave（Vue 3 Composition API）是处理“离开确认”的首选方式——它只在当前组件即将被导航离开时触发，逻辑聚焦、无副作用，且能精准控制路由跳转流程。
判断是否需要弹窗的关键：跟踪表单修改状态
不能每次离开都弹窗，必须明确“什么算未保存”。推荐做法是用响应式变量记录编辑状态，并与初始值做比对：
- 组件初始化时（
onMounted或created），深拷贝原始表单数据作为快照（如initialForm = JSON.parse(JSON.stringify(formData.value))） - 监听所有可编辑字段变化（
@input、@change或v-model更新后），设置isDirty.value = true - 调用保存成功或重置表单后，同步设
isDirty.value = false - 避免用浅比较（如
===）或仅靠时间戳判断，否则对象嵌套变更会漏判
Vue 3 中正确注册 onBeforeRouteLeave
该守卫必须在组件 setup 阶段同步注册，不能包裹在条件语句、异步回调或事件处理器中，否则可能失效：
