onbeforeunload在SPA中不响应路由切换，因其仅监听浏览器原生导航事件；正确用途是防止用户意外离开含未保存数据的页面，需配合isDirty状态精确控制并及时清理监听器。
onbeforeunload 在 SPA 里为什么绑了没反应？
因为 SPA 路由切换（比如 Vue Router 或 React Router 的 push / replace）不触发页面刷新，onbeforeunload 只监听浏览器原生的导航事件（关闭标签页、输入新 URL、刷新），不是路由变化。你绑在 window 上，但用户点“返回”或跳转路由时根本不会触发它。
什么时候该用 onbeforeunload？只用于防止意外离开页面
onbeforeunload 的唯一合法用途是：用户有未保存表单、编辑中内容等真实数据风险时，提示“确定要离开吗？”。浏览器强制要求必须返回字符串（现代浏览器只显示统一提示，不展示你的文字），且不能自定义按钮或样式。常见错误是把它当成“路由守卫”来用——那是框架层面的事，不该靠这个兜底。
- ✅ 正确场景：用户在富文本编辑器里写了 200 字还没点保存，此时刷新/关闭应拦截
- ❌ 错误场景：想阻止用户从 /editor 跳去 /dashboard，这该用
router.beforeEach或useBlocker - ⚠️ 注意：
onbeforeunload在 iOS Safari 和部分安卓 WebView 中可能被忽略或静默失效
怎么正确绑定和清理？别让多个监听器堆叠
SPA 生命周期长，组件反复挂载/卸载，容易重复添加 onbeforeunload 监听器，导致弹窗多次。必须配对添加和移除，且判断依据只能是“当前是否有未保存状态”，不能依赖路由路径。
let isDirty = false;
// 表单输入时设为 true
document.getElementById('my-input').addEventListener('input', () => {
isDirty = true;
});
// 绑定前先清理旧的（尤其在组件卸载时）
window.addEventListener('beforeunload', handleBeforeUnload);
function handleBeforeUnload(e) {
if (isDirty) {
e.preventDefault();
e.returnValue = ''; // 必须设 returnValue 或返回字符串
}
}
// 卸载时清理（如 React useEffect cleanup / Vue unmounted）
window.removeEventListener('beforeunload', handleBeforeUnload);
- 不要用
window.onbeforeunload = ...赋值方式，会覆盖其他库（如 analytics SDK）可能设置的监听器 -
isDirty状态必须全局可读，推荐放在状态管理（Pinia / Redux）或顶层组件 context 中 - 用户点击“保存”后，务必手动重置
isDirty = false，否则后续所有离开都会拦截
React/Vue 场景下更安全的写法
直接操作 window 容易漏掉清理时机。框架封装能降低出错概率：
立即学习“前端免费学习笔记（深入）”；
// React 示例（useEffect + useRef 防止闭包 stale）
useEffect(() => {
const handler = (e) => {
if (isDirtyRef.current) {
e.preventDefault();
e.returnValue = '';
}
};
window.addEventListener('beforeunload', handler);
return () => window.removeEventListener('beforeunload', handler);
}, []);
- Vue 3 的
onBeforeUnmount同理，确保卸载时移除监听 - 避免在 computed 或 render 中动态绑定——每次渲染都加监听器，不清理就炸了
- 如果用了 PWA 或 Service Worker，注意某些离线场景下
beforeunload可能行为异常
真正麻烦的不是绑定，而是状态同步：你得精确知道“用户到底有没有改东西”，而不是靠路由跳转猜。这个判断逻辑一旦出错，要么拦不住，要么拦过头——后者会让用户觉得应用卡死。
