企业官网建设流程全解析

1. 项目概述：为什么 Vue 里“关页面弹提示”这么难搞，又非得搞？

你有没有遇到过这种场景：用户正在编辑一份重要表单，填了大半，突然手滑点了浏览器右上角的 ×，或者误按了 F5 刷新——页面瞬间白屏，所有未保存的内容灰飞烟灭。你作为开发者，第一反应肯定是：“得加个提示！”于是翻文档、搜 Stack Overflow、抄代码，三分钟写完window.addEventListener('beforeunload', ...)，本地测试一切正常。结果一上线，Chrome 控制台立刻报错：[Violation] Permissions Policy violation: unload is not allowed in this document；Vue 2 项目里甚至根本没反应，Vue 3 项目在某些版本下提示框只闪一下就消失。更尴尬的是，用户反馈说“明明没填东西，为啥总弹窗？”——这已经不是功能实现问题，而是体验崩坏。

这个标题“vue实现浏览器关闭或刷新弹窗提示（beforeunload/unload）”，表面看只是调用一个原生 API，但背后牵扯的是现代浏览器安全策略演进、Vue 生命周期与 DOM 事件的耦合机制、单页应用状态管理的边界判断，以及真实业务中“什么才算‘有未保存内容’”的语义定义。它不是一段能直接复制粘贴的 5 行代码，而是一套需要在 Vue 实例生命周期、路由守卫、表单状态监听、浏览器兼容性、甚至用户心理预期之间反复权衡的轻量级交互协议。

核心关键词vue、beforeunload、unload、弹窗提示，每一个都带着坑：vue决定了你不能裸写全局事件，必须和响应式系统对齐；beforeunload是唯一被现代浏览器保留的、能触发原生提示的钩子，但它被严格限制——只能返回字符串（且现代浏览器会忽略自定义文案，统一显示“离开此页面？”，这是故意设计的防钓鱼机制）；unload已被废弃，仅用于日志上报等无交互场景；而“弹窗提示”这个词本身就有误导性——它不是你用alert()或Element UI Dialog实现的那种漂亮弹窗，而是浏览器强制接管的、不可定制的、带明确风险提示的原生对话框。

适合谁来读这篇？如果你是刚学 Vue 的新手，正被面试官问到“怎么防止用户误关页面”，别急着背代码，先理解为什么beforeunload不是你想弹就弹的按钮；如果你是做了三年 Vue 的中级开发者，还在用this.$router.beforeEach拦截所有路由跳转来模拟“防丢失”，那这篇会告诉你为什么这种方案在标签页切换、地址栏输入、书签点击等场景下必然失效；如果你是技术负责人，正为 SaaS 系统的文档编辑模块设计数据保护策略，这篇会给你一套可落地的状态检测逻辑、兼容性兜底方案，以及比“弹窗”更重要的——如何用视觉反馈降低用户误操作概率。它不教你造轮子，而是帮你把轮子装在正确的位置上。

2. 核心思路拆解：为什么不能直接写window.addEventListener？Vue 的生命周期才是关键战场

很多人第一次尝试时，习惯性地在mounted钩子里写：

mounted() { window.addEventListener('beforeunload', (e) => { e.preventDefault(); e.returnValue = '你有未保存的内容，确定要离开吗？'; }); }

然后发现：Vue 2 里完全没反应，Vue 3 Composition API 里onMounted里写也无效，甚至控制台报错。这不是代码写错了，而是你把战场选错了位置。beforeunload事件的触发时机极其特殊——它发生在浏览器准备卸载当前文档的最后时刻，此时 Vue 实例的beforeUnmount或unmounted钩子可能还没执行，也可能已经执行完毕，但更重要的是：Vue 的响应式系统在此刻已停止工作，this或ref的值无法保证实时性。你监听的window对象是全局的，但你的判断逻辑（比如“表单是否已修改”）依赖 Vue 的响应式数据，这两者在beforeunload触发瞬间是脱节的。

2.1 Vue 2 与 Vue 3 的根本差异：响应式代理的“存活时间”

Vue 2 使用Object.defineProperty实现响应式，实例销毁时会清理所有watcher，但beforeunload事件监听器是挂载在window上的，它不随 Vue 实例销毁而自动移除。这就导致两个严重问题：

• 内存泄漏：组件多次创建销毁后，监听器越积越多；
• 状态错乱：监听器里访问的this.formData可能是旧实例的数据，甚至this已指向undefined。

Vue 3 的Proxy响应式更强大，但beforeunload触发时，setup()函数早已执行完毕，ref和reactive创建的响应式对象虽然还在内存中，但其effect依赖收集已停止，computed不再更新。你写的if (isFormDirty.value) { ... }中的isFormDirty.value可能还是上次watch触发时的旧值。

提示：beforeunload是浏览器内核级事件，它不经过 Vue 的事件循环，也不触发 Vue 的任何生命周期钩子。把它想象成“操作系统即将关机前的最后一声警报”，此时所有应用层的框架逻辑都已暂停。

2.2 真正的解决方案：把状态判断前置，让beforeunload只做“开关”

正确的思路不是让beforeunload去“计算”是否该提示，而是让它只读取一个预先计算好、稳定可靠、无需响应式更新的布尔值。这个值必须在用户操作（如输入、选择、上传）发生时，由 Vue 的响应式系统实时更新，并同步到一个全局可访问的变量中。beforeunload监听器只需检查这个变量，决定是否触发提示。

我们把这个变量称为shouldPromptBeforeUnload。它的更新时机必须严格绑定在 Vue 的响应式变化之后，且不能依赖watch的异步队列（因为beforeunload是同步事件）。最佳实践是：在所有可能修改表单状态的操作后，立即同步设置该标志位。

例如，一个文本输入框：

<template> <input v-model="formData.title" @input="markAsDirty" /> </template> <script> export default { data() { return { formData: { title: '' } } }, methods: { markAsDirty() { // 关键：这里不是简单设 this.isDirty = true，而是同步更新全局标志 window.__VUE_UNLOAD_PROMPT__ = true; // 同时，为了 Vue 内部状态一致，也更新响应式数据 this.isDirty = true; } } } </script>

2.3 为什么unload被废弃？它和beforeunload的本质区别

网络热词里频繁出现permissions policy violation: unload is not allowed，这源于 Chrome 80+ 对unload事件的严格限制。unload在页面完全卸载后触发，此时 DOM 已销毁，JavaScript 执行环境即将关闭，你无法进行任何有意义的交互（比如弹窗、AJAX 请求），只能做极轻量的日志记录。而beforeunload发生在卸载前，浏览器仍保持完整执行环境，允许你阻止默认行为（即显示提示框）。

但beforeunload的权限也被收紧：它只允许返回字符串，且浏览器会忽略你的文案，统一显示标准提示。这是为了防止恶意网站用恐吓性文案（如“您的电脑已被感染！”）诱导用户点击“取消”。所以，所谓“自定义弹窗”从技术上就是不可能的——你只能告诉浏览器：“我有未保存内容，请让用户确认”，至于怎么显示，由浏览器决定。

注意：beforeunload的触发条件非常苛刻。它只在用户主动触发页面卸载时生效，比如点击关闭标签页、点击刷新按钮、在地址栏输入新 URL 回车。它不会在以下情况触发：

• 用户通过 Vue Router 编程式导航（如router.push()）；
• 用户点击<a>标签跳转；
• 页面因 JavaScript 错误崩溃；
• 浏览器进程被强制杀死。 这意味着，单靠beforeunload无法覆盖所有“数据丢失”场景，必须结合路由守卫。

3. 核心细节解析：从零搭建一套健壮的防丢失方案

一个真正可用的方案，必须解决四个核心问题：状态检测的准确性、事件监听的可靠性、跨组件状态共享、以及浏览器兼容性兜底。下面逐层拆解。

3.1 状态检测：什么是“有未保存内容”？不能只看v-model绑定

很多教程教你在v-model的@input里设isDirty = true，这太粗糙了。真实业务中，“未保存”意味着：

• 表单字段值与初始值不同；
• 富文本编辑器内容与初始 HTML 不同；
• 文件上传列表有新增/删除；
• 表格行被添加、编辑或删除；
• 甚至包括“用户点击了‘保存’按钮但 AJAX 还在 pending 中”。

所以，状态检测必须是语义化的、可配置的、可复用的。我们设计一个useFormDirty组合式函数（Vue 3）或 mixin（Vue 2）：

// composables/useFormDirty.js import { ref, watch, onBeforeUnmount } from 'vue' export function useFormDirty(initialData, options = {}) { const { // 检测精度：'shallow'（浅比较）、'deep'（深比较，默认）、'custom'（自定义函数） compareMode = 'deep', // 自定义比较函数，接收 (current, initial) => boolean customCompare = null, // 是否在首次加载时就标记为脏（比如从服务器拉取数据后默认算“已修改”） autoMarkOnLoad = false } = options const isDirty = ref(autoMarkOnLoad) const initialRef = ref(JSON.parse(JSON.stringify(initialData))) // 深比较工具函数（简化版，生产环境建议用 lodash.isEqual） const deepEqual = (a, b) => { if (a === b) return true if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false const keysA = Object.keys(a), keysB = Object.keys(b) if (keysA.length !== keysB.length) return false for (let key of keysA) { if (!keysB.includes(key)) return false if (!deepEqual(a[key], b[key])) return false } return true } const markAsDirty = () => { isDirty.value = true } const markAsClean = () => { isDirty.value = false // 更新初始快照 initialRef.value = JSON.parse(JSON.stringify(initialData)) } // 监听 initialData 变化（比如从 API 重新加载数据） watch(() => initialData, (newVal) => { if (newVal && compareMode === 'deep') { // 如果新数据与当前快照不同，则重置脏状态 if (!deepEqual(newVal, initialRef.value)) { markAsClean() } } }, { immediate: true }) // 返回响应式状态和方法 return { isDirty, markAsDirty, markAsClean, // 提供一个“是否应该提示”的计算属性，避免外部直接读 isDirty shouldPrompt: isDirty } }

这个函数的关键在于：

• 它不依赖watch的异步更新，markAsDirty()是同步调用；
• initialRef存储的是初始数据的深拷贝，避免引用污染；
• compareMode支持不同精度，比如对于大型数组，shallow比较length和首尾元素即可，避免性能损耗；
• autoMarkOnLoad解决了“用户打开编辑页，数据已存在，但尚未修改，此时不应提示”的问题。

3.2 全局标志位：为什么用window.__VUE_UNLOAD_PROMPT__而不是localStorage？

beforeunload监听器需要一个全局、同步、低延迟的访问方式。localStorage是同步 API，但写入时会触发storage事件，且在某些浏览器中存在微小延迟；sessionStorage同理。而window对象上的属性是纯内存操作，毫秒级响应。

我们约定一个全局变量名window.__VUE_UNLOAD_PROMPT__（双下划线前缀表示私有，避免冲突）。在useFormDirty的markAsDirty里同步赋值：

const markAsDirty = () => { isDirty.value = true window.__VUE_UNLOAD_PROMPT__ = true // 关键：同步写入全局标志 }

同时，在markAsClean里清除：

const markAsClean = () => { isDirty.value = false window.__VUE_UNLOAD_PROMPT__ = false }

这样，beforeunload监听器只需读取这个变量：

const handleBeforeUnload = (e) => { if (window.__VUE_UNLOAD_PROMPT__) { e.preventDefault() e.returnValue = '' // 必须返回空字符串或任意字符串，否则不生效 } }

3.3 Vue 2 与 Vue 3 的集成方式：mixin vs composable

Vue 2（Options API）：使用 mixin 封装，避免每个组件重复写逻辑。

// mixins/formDirtyMixin.js export default { data() { return { isFormDirty: false } }, methods: { markFormAsDirty() { this.isFormDirty = true window.__VUE_UNLOAD_PROMPT__ = true }, markFormAsClean() { this.isFormDirty = false window.__VUE_UNLOAD_PROMPT__ = false } } } // 在组件中使用 export default { mixins: [formDirtyMixin], data() { return { formData: { name: '', email: '' } } }, mounted() { // 初始化时，将 formData 快照存入 mixin 的内部状态 this.initialData = JSON.parse(JSON.stringify(this.formData)) }, watch: { formData: { handler() { // 比较当前值与初始值 const isDifferent = JSON.stringify(this.formData) !== JSON.stringify(this.initialData) if (isDifferent) { this.markFormAsDirty() } else { this.markFormAsClean() } }, deep: true } } }

Vue 3（Composition API）：使用onBeforeUnmount清理监听器，这是 Vue 3 的优势。

<script setup> import { onBeforeUnmount, onMounted } from 'vue' import { useFormDirty } from '@/composables/useFormDirty' const initialData = { name: '', email: '' } const { isDirty, markAsDirty, markAsClean, shouldPrompt } = useFormDirty(initialData) // 在 input 事件中调用 const handleInput = () => { markAsDirty() } // 组件卸载时，确保清理全局标志（虽然 beforeunload 会自己处理，但保险起见） onBeforeUnmount(() => { if (window.__VUE_UNLOAD_PROMPT__) { window.__VUE_UNLOAD_PROMPT__ = false } }) // 全局 beforeunload 监听器（只注册一次） onMounted(() => { const handleBeforeUnload = (e) => { if (window.__VUE_UNLOAD_PROMPT__) { e.preventDefault() e.returnValue = '' } } window.addEventListener('beforeunload', handleBeforeUnload) // 卸载时移除监听器 onBeforeUnmount(() => { window.removeEventListener('beforeunload', handleBeforeUnload) }) }) </script>

3.4 路由守卫：弥补beforeunload的盲区

beforeunload只管浏览器级操作，不管 Vue Router 的编程式导航。用户点击“保存并返回列表页”，如果router.push('/list')时表单是脏的，beforeunload不会触发。这时必须用router.beforeEach拦截：

// router/index.js router.beforeEach((to, from, next) => { // 检查 from 页面是否有未保存内容 if (from.meta?.requiresSave && window.__VUE_UNLOAD_PROMPT__) { const answer = window.confirm('你有未保存的内容，确定要离开吗？') if (answer) { next() } else { next(false) // 取消导航 } } else { next() } })

但window.confirm是阻塞式弹窗，体验差。更好的做法是：在目标路由组件中，通过beforeRouteLeave守卫，结合next(false)和自定义 UI 弹窗：

<script setup> import { onBeforeRouteLeave } from 'vue-router' onBeforeRouteLeave((to, from, next) => { if (window.__VUE_UNLOAD_PROMPT__) { // 显示自定义弹窗（如 Element Plus 的 Dialog） showCustomDialog().then((confirmed) => { if (confirmed) { next() } else { next(false) } }) } else { next() } }) </script>

这样，beforeunload负责浏览器原生操作，路由守卫负责 SPA 内部导航，两者互补。

4. 实操过程：从零开始，一步步实现一个可复用的防丢失模块

现在，我们把前面所有设计整合成一个开箱即用的模块。假设你正在开发一个 Vue 3 + Vite 的项目，目标是为所有编辑页面提供统一的防丢失能力。

4.1 第一步：创建核心 HookusePageUnloadGuard

新建文件src/composables/usePageUnloadGuard.js：

import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue' import { useRouter, useRoute } from 'vue-router' // 全局标志位，确保只初始化一次 let isInitialized = false const unloadPromptFlag = ref(false) // 初始化全局监听器 const initGlobalListener = () => { if (isInitialized) return const handleBeforeUnload = (e) => { if (unloadPromptFlag.value) { e.preventDefault() e.returnValue = '' // 必须返回字符串 } } window.addEventListener('beforeunload', handleBeforeUnload) // 清理函数 const cleanup = () => { window.removeEventListener('beforeunload', handleBeforeUnload) } // 在页面卸载时清理（虽然浏览器会自动清理，但显式调用更稳妥） window.addEventListener('unload', cleanup) isInitialized = true return cleanup } // 主 Hook export function usePageUnloadGuard(options = {}) { const { // 是否启用（可用于某些页面禁用） enabled = true, // 自定义提示文案（仅用于自定义弹窗，不影响 beforeunload） message = '你有未保存的内容，确定要离开吗？' } = options const router = useRouter() const route = useRoute() const instance = getCurrentInstance() // 标志位：是否应该提示 const shouldPrompt = ref(false) // 设置提示状态 const setPrompt = (value) => { shouldPrompt.value = value unloadPromptFlag.value = value } // 清除提示状态 const clearPrompt = () => { shouldPrompt.value = false unloadPromptFlag.value = false } // 初始化全局监听器（只在第一个调用时执行） if (!isInitialized) { const cleanup = initGlobalListener() // 组件卸载时清理 onBeforeUnmount(() => { if (cleanup) cleanup() }) } // 如果启用了路由守卫，则注册 if (enabled && router) { // 在组件内注册路由守卫 if (instance) { instance.proxy?.$options.beforeRouteLeave = [ (to, from, next) => { if (shouldPrompt.value) { // 这里可以调用你自己的 UI 弹窗服务 // 例如：import { useDialog } from '@/composables/useDialog' // const { openConfirm } = useDialog() // openConfirm(message).then(confirmed => { // if (confirmed) next() // else next(false) // }) // 为演示，这里用原生 confirm（实际项目请替换） if (window.confirm(message)) { next() } else { next(false) } } else { next() } } ] } } return { shouldPrompt, setPrompt, clearPrompt, // 提供一个便捷方法：当表单提交成功后自动清除 onFormSubmitSuccess: () => { clearPrompt() } } }

4.2 第二步：在编辑组件中使用

创建一个编辑页面src/views/EditUser.vue：

<template> <div class="edit-page"> <h2>编辑用户</h2> <form @submit.prevent="handleSubmit"> <div class="form-group"> <label>姓名：</label> <input v-model="formData.name" @input="handleInput" /> </div> <div class="form-group"> <label>邮箱：</label> <input v-model="formData.email" @input="handleInput" /> </div> <button type="submit">保存</button> <button type="button" @click="handleCancel">取消</button> </form> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import { usePageUnloadGuard } from '@/composables/usePageUnloadGuard' // 模拟从 API 获取的初始数据 const initialData = { name: '张三', email: 'zhangsan@example.com' } const formData = reactive({ ...initialData }) // 使用防丢失 Hook const { shouldPrompt, setPrompt, clearPrompt, onFormSubmitSuccess } = usePageUnloadGuard({ message: '您修改了用户信息，尚未保存，确定要离开吗？' }) // 输入时标记为脏 const handleInput = () => { setPrompt(true) } // 取消编辑 const handleCancel = () => { // 重置表单 Object.assign(formData, initialData) clearPrompt() } // 提交表单 const handleSubmit = async () => { try { // 模拟 API 调用 await new Promise(resolve => setTimeout(resolve, 500)) // 保存成功，清除提示 onFormSubmitSuccess() // 跳转回列表页 // router.push('/users') } catch (error) { console.error('保存失败', error) } } // 组件挂载时，检查初始数据是否与当前表单一致 onMounted(() => { const isSame = JSON.stringify(formData) === JSON.stringify(initialData) if (!isSame) { setPrompt(true) } }) </script> <style scoped> .edit-page { max-width: 600px; margin: 0 auto; padding: 20px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input { width: 100%; padding: 8px; border: 1px solid #ccc; } button { margin-right: 10px; padding: 8px 16px; } </style>

4.3 第三步：处理复杂表单（富文本、文件上传）

真实项目中，表单往往不止input。比如富文本编辑器quill或tiptap，它们的内容不是通过v-model绑定的，需要手动监听：

<template> <div> <client-only> <tiptap-editor :content="formData.content" @update="handleContentUpdate" /> </client-only> </div> </template> <script setup> import { ref } from 'vue' import { usePageUnloadGuard } from '@/composables/usePageUnloadGuard' const { setPrompt } = usePageUnloadGuard() const formData = ref({ content: '<p>初始内容</p>' }) const handleContentUpdate = (newContent) => { // Tiptap 的 update 事件传递的是 HTML 字符串 if (newContent !== formData.value.content) { formData.value.content = newContent setPrompt(true) } } </script>

对于文件上传，监听input[type="file"]的change事件：

<input type="file" @change="handleFileChange" /> <script setup> const handleFileChange = (e) => { const files = e.target.files if (files.length > 0) { // 将文件列表转为可序列化的对象（如文件名、大小） const fileInfos = Array.from(files).map(f => ({ name: f.name, size: f.size })) // 存入 formData formData.value.attachments = fileInfos setPrompt(true) } } </script>

4.4 第四步：兼容性处理与降级方案

尽管beforeunload在现代浏览器中广泛支持，但仍有例外：

• iOS Safari 15.4+ 为防止滥用，完全禁用了beforeunload的提示功能，即使你写了e.preventDefault()，也不会弹窗；
• 某些企业内网浏览器（如旧版 IE）可能不支持beforeunload；
• PWA 应用在离线模式下行为异常。

因此，必须提供降级方案：视觉反馈 + 明确的保存状态指示。

在页面顶部添加一个醒目的状态条：

<div v-if="shouldPrompt" class="save-status-bar"> <span>⚠️ 您有未保存的更改</span> <button @click="handleSave">立即保存</button> <button @click="clearPrompt">放弃更改</button> </div>

CSS 样式：

.save-status-bar { position: fixed; top: 0; left: 0; right: 0; background: #fff3cd; color: #856404; padding: 12px 20px; text-align: center; z-index: 1000; border-bottom: 1px solid #ffeaa7; display: flex; justify-content: space-between; align-items: center; } .save-status-bar button { background: #ffc107; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }

这个状态条在shouldPrompt为true时显示，用户可以一键保存或放弃，既解决了 iOS Safari 的兼容性问题，又提升了整体用户体验——毕竟，比起突兀的浏览器弹窗，一个清晰的状态提示更友好。

5. 常见问题与排查技巧实录：那些让你抓狂的“为什么没弹窗”

在实际项目中，我踩过的坑比写过的代码还多。下面整理出最典型的 7 个问题，附带排查步骤和终极解决方案。

5.1 问题一：Chrome 控制台报[Violation] Permissions Policy violation: unload is not allowed

现象：控制台红色报错，但beforeunload逻辑似乎还能运行。

原因分析：这不是beforeunload的问题，而是你代码里不小心调用了window.unload或document.addEventListener('unload', ...)。现代浏览器（Chrome 95+）已完全禁用unload事件，任何对其的监听都会触发此警告。

排查步骤：

1. 在控制台搜索unload，定位到所有相关代码；
2. 检查是否在mounted或created钩子中写了window.addEventListener('unload', ...)；
3. 检查第三方库（如某些老版本的 analytics SDK）是否内部调用了unload。

解决方案：

• 彻底删除所有unload相关代码；
• 将unload的逻辑迁移到beforeunload中（注意：beforeunload里不能做耗时操作，只能做快速判断）；
• 如果必须做卸载日志，改用navigator.sendBeacon()：

// 替代 unload 的日志上报 const sendUnloadLog = () => { const logData = { page: location.href, timestamp: Date.now() } navigator.sendBeacon('/api/log', JSON.stringify(logData)) } window.addEventListener('beforeunload', () => { sendUnloadLog() // 注意：sendBeacon 是异步且可靠的 })

5.2 问题二：Vue 2 项目中beforeunload完全不触发

现象：代码写得和文档一模一样，但关页面就是没反应。

原因分析：Vue 2 的mounted钩子执行时，this指向当前组件实例，但window.addEventListener的回调函数里的this是window，无法访问组件数据。更致命的是，Vue 2 的data是函数返回的对象，this在事件回调里是undefined。

排查步骤：

1. 在mounted里console.log(this)，确认this是否为组件实例；
2. 在beforeunload回调里console.log(this)，确认this是否为window；
3. 检查beforeunload回调里是否用了this.xxx访问数据。

解决方案：

• 使用箭头函数保持this上下文：

mounted() { // ❌ 错误：普通函数，this 指向 window // window.addEventListener('beforeunload', function(e) { ... }) // ✅ 正确：箭头函数，this 指向组件实例 window.addEventListener('beforeunload', (e) => { if (this.isDirty) { e.preventDefault() e.returnValue = '' } }) }

• 或者，将状态判断逻辑提前，只在回调里读取全局变量：

mounted() { // 在 mounted 里设置全局标志 this.$nextTick(() => { window.__VUE_UNLOAD_PROMPT__ = this.isDirty }) window.addEventListener('beforeunload', (e) => { if (window.__VUE_UNLOAD_PROMPT__) { e.preventDefault() e.returnValue = '' } }) }

5.3 问题三：用户刷新页面后，提示框一闪而过，来不及点击“离开”

现象：beforeunload提示框出现不到 1 秒就自动关闭。

原因分析：这是 Chrome 的“防滥用”策略。如果你在beforeunload回调里执行了耗时操作（如console.log大量数据、调用fetch、触发 Vue 的nextTick），浏览器会认为你在阻塞主线程，从而强制关闭提示框。

排查步骤：

1. 在beforeunload回调里只留最简代码：e.preventDefault(); e.returnValue = '';；
2. 逐步添加其他代码，观察何时出现闪退；
3. 检查是否有console.table、JSON.stringify大对象等操作。

解决方案：

• beforeunload回调里只做一件事：读取全局标志位并返回；
• 所有状态计算、日志记录、API 调用，必须在beforeunload之前完成；
• 使用performance.now()监控回调执行时间，确保 < 1ms。

5.4 问题四：Vue Router 编程式导航（router.push）不触发提示

现象：用户点击“保存并返回”，页面跳走了，但没提示。

原因分析：beforeunload只监听浏览器原生卸载，router.push是前端路由跳转，不触发页面卸载。

排查步骤：

1. 确认导航是否为router.push或router.replace；
2. 检查是否在目标路由组件中注册了beforeRouteLeave守卫；
3. 检查beforeRouteLeave是否被next(false)正确拦截。

解决方案：

• 如前所述，必须在目标组件（即“离开的页面”）中使用beforeRouteLeave；
• 如果是全局拦截，使用router.beforeEach，但要注意from.meta.requiresSave的设置；

// 在编辑页的路由配置中添加 meta { path: '/user/edit/:id', component: EditUser, meta: { requiresSave: true } }

5.5 问题五：表单提交后，再次进入编辑页，shouldPrompt仍为true

现象：用户保存成功，跳转到列表页，再点进同一个用户编辑，页面顶部显示“有未保存更改”。

原因分析：shouldPrompt状态没有在页面离开时重置。beforeunload只在关页面时触发，router.push不会触发它，所以标志位一直为true。

排查步骤：

1. 在beforeRouteLeave守卫中，next()之后是否调用了clearPrompt()；
2. 在onUnmounted钩子中是否清除了全局标志；
3. 检查usePageUnloadGuard的clearPrompt方法是否被正确调用。

解决方案：

• 在beforeRouteLeave的next()回调中清除状态：

onBeforeRouteLeave((to, from, next) => { if (shouldPrompt.value) { if (confirm('...')) { clearPrompt() // ✅ 关键：在确认后清除 next() } else { next(false) } } else { next() } })

• 或者，在目标页面（列表页）的mounted钩子中，主动清除：

// ListUsers.vue mounted() { // 离开编辑页后，重置全局状态 window.__VUE_UNLOAD_PROMPT__ = false }

5.6 问题六：iOS Safari 下完全不弹窗，且无任何报错

现象：在 iPhone 上测试，关页面、刷新，一点反应都没有。

原因分析：iOS Safari 15.4+ 出于隐私考虑，**彻底移除了 `beforeunload