Vue 项目实现关闭/刷新浏览器窗口前的离开确认提示

在 Vue 项目中，我们经常遇到这样的需求：用户编辑表单后未保存，点击关闭标签页或刷新页面时需要弹出一个确认框，防止数据丢失。本文将结合一个实际代码片段，详细介绍如何利用 beforeunload 事件与 Vuex 状态管理优雅地实现这一功能，并给出优化建议。

1. 为什么需要离开确认？

防止意外数据丢失：用户填写了长篇表单或进行了重要操作，若不小心关闭页面，数据可能丢失。
提升用户体验：给用户二次确认的机会，避免不可挽回的误操作。
业务合规性：某些业务场景（如订单填写、考试答题）强制要求离开前确认。

2. `beforeunload` 事件基础

浏览器提供了 beforeunload 事件，在页面卸载（关闭、刷新、链接跳转等）前触发。开发者可以在事件中设置 returnValue 或调用 preventDefault() 来触发浏览器的内置确认对话框。

基本用法：

javascript 复制代码

window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = ''; // 大部分浏览器需要设置returnValue
});

⚠️ 重要限制：

现代浏览器（Chrome 51+、Firefox 44+、Safari 9.1+）不再支持自定义提示文本，只能显示浏览器内置的通用提示。
只有用户与页面发生过交互（点击、输入等）后，beforeunload 才会生效（部分浏览器）。

3. 原始代码分析

以下是一个 Vue 组件中的实现示例（App.vue 或根组件）：

javascript 复制代码

<script>
export default {
  name: 'App',
  mounted() {
    if (process.env.NODE_ENV === 'development') return
    this.$nextTick(() => {
      window.addEventListener('beforeunload', this.beforeUnload)
    })
  },
  beforeDestroy() {
    if (process.env.NODE_ENV === 'development') return
    window.removeEventListener('beforeunload', this.beforeUnload)
  },
  methods: {
    beforeUnload(e) {
      if (!this.$store.state.user.isLeaveToast) {
        this.$store.commit('user/SET_TOAST', true)
        return false
      }
      e = e || window.event
      if (e || window.event) e.returnValue = 1;
      return 1;
    }
  }
}
</script>

代码逻辑解析

环境判断：开发环境下不添加监听，避免每次刷新都弹窗影响调试。
生命周期 ：mounted 中添加事件，beforeDestroy 中移除。
状态控制 ：
- 当 store.state.user.isLeaveToast 为 false 时，先将状态改为 true，然后直接 return false，不触发浏览器弹窗。
- 当下一次 beforeunload 触发（即用户再次尝试离开）时，因为 isLeaveToast 已为 true，就设置 e.returnValue = 1 并返回 1，此时浏览器会显示确认框。
注释说明 ：系统中调用 location.reload() 刷新时，即使 isLeaveToast 为 false 也不应弹窗（但当前逻辑会导致第一次刷新时不弹，第二次刷新才弹------这可能是设计意图）。

存在的问题与改进空间

浏览器兼容性 ：return false 和 return 1 在不同浏览器中行为不一致，标准做法是调用 e.preventDefault() 并设置 e.returnValue = ''。
逻辑复杂：通过两次触发来区分"需要弹窗"和"不需要弹窗"，不够直观，且在某些情况下（如用户第一次尝试关闭就被浏览器拦截）可能失效。
仅依赖 Vuex 状态：无法灵活控制哪些页面需要提示（应该由业务组件决定）。

4. 优化后的实现方案

4.1 核心思路

使用一个统一的 shouldConfirmLeave 状态（默认为 false），只有业务组件将其设置为 true 时（如表单发生变动），才启用离开确认。
在 beforeunload 回调中，直接根据该状态决定是否触发浏览器弹窗。
允许业务组件通过 Vuex mutation 或 provide/inject 修改状态。

4.2 优化代码（Vuex + 根组件）

store/modules/user.js：

javascript 复制代码

const state = {
  needConfirmBeforeLeave: false, // 是否需要离开确认
};

const mutations = {
  SET_NEED_CONFIRM_LEAVE(state, flag) {
    state.needConfirmBeforeLeave = flag;
  },
};

export default { state, mutations };

App.vue（根组件）：

javascript 复制代码

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    // 仅在生产环境启用，开发环境避免干扰
    if (process.env.NODE_ENV !== 'production') return;
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    if (process.env.NODE_ENV !== 'production') return;
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  methods: {
    handleBeforeUnload(e) {
      const needConfirm = this.$store.state.user.needConfirmBeforeLeave;
      if (!needConfirm) return; // 无未保存内容，直接关闭

      // 标准写法：触发浏览器确认框
      e.preventDefault();
      e.returnValue = ''; // 兼容旧版浏览器
      // 注意：自定义提示文字已失效，这里设置空字符串即可
    },
  },
};
</script>

业务组件（如表单页）：

javascript 复制代码

export default {
  data() {
    return {
      formData: { /* ... */ },
      originalData: null,
    };
  },
  mounted() {
    this.originalData = JSON.stringify(this.formData);
    // 监听表单变化
    this.$watch(
      () => JSON.stringify(this.formData),
      (newVal, oldVal) => {
        const isDirty = (newVal !== this.originalData);
        this.$store.commit('user/SET_NEED_CONFIRM_LEAVE', isDirty);
      },
      { deep: true }
    );
  },
  // 路由内部跳转也需要提示（例如点击菜单切换到其他页面）
  beforeRouteLeave(to, from, next) {
    if (this.$store.state.user.needConfirmBeforeLeave) {
      const answer = window.confirm('表单未保存，确定要离开吗？');
      if (answer) {
        // 用户确认离开，重置状态
        this.$store.commit('user/SET_NEED_CONFIRM_LEAVE', false);
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  beforeDestroy() {
    // 组件销毁时重置确认状态（避免影响其他页面）
    this.$store.commit('user/SET_NEED_CONFIRM_LEAVE', false);
  },
};

4.3 关于 `location.reload()` 刷新的处理

如果你希望程序内调用 location.reload() 时不触发确认框，可以在调用前临时禁用标志：

javascript 复制代码

// 刷新前
this.$store.commit('user/SET_NEED_CONFIRM_LEAVE', false);
location.reload();

或者使用 window.location.replace() 避免触发 beforeunload（但不推荐）。

5. 进阶技巧：区分关闭、刷新与路由跳转

行为	触发 `beforeunload`	触发 `beforeRouteLeave`	推荐处理方式
关闭标签页 / 浏览器	✅	❌	`beforeunload` 弹窗
刷新页面（F5 / 右键刷新）	✅	❌	`beforeunload` 弹窗
点击链接跳转到外部网站	✅	❌	`beforeunload` 弹窗
路由内部跳转（Vue Router）	❌	✅	`beforeRouteLeave` 弹窗

因此，最佳实践是 同时处理 beforeunload 和 beforeRouteLeave，前者捕获页面关闭/刷新，后者捕获应用内导航。

6. 完整示例 Demo（Vue CLI 项目）

6.1 目录结构

复制代码

src/
├── store/
│   ├── index.js
│   └── modules/
│       └── user.js
├── views/
│   └── FormPage.vue
├── App.vue
└── main.js

6.2 代码实现

store/modules/user.js：

javascript 复制代码

const state = {
  needConfirmLeave: false,
};

const mutations = {
  setConfirmLeave(state, flag) {
    state.needConfirmLeave = flag;
  },
};

export default { state, mutations };

App.vue：

vue 复制代码

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/form">表单页</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  mounted() {
    if (process.env.NODE_ENV === 'production') {
      window.addEventListener('beforeunload', this.beforeUnloadHandler);
    }
  },
  beforeDestroy() {
    if (process.env.NODE_ENV === 'production') {
      window.removeEventListener('beforeunload', this.beforeUnloadHandler);
    }
  },
  methods: {
    beforeUnloadHandler(e) {
      if (this.$store.state.user.needConfirmLeave) {
        e.preventDefault();
        e.returnValue = '';
      }
    },
  },
};
</script>

views/FormPage.vue：

vue 复制代码

<template>
  <div>
    <h2>重要表单</h2>
    <input v-model="form.name" placeholder="姓名" />
    <textarea v-model="form.content" placeholder="内容"></textarea>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: { name: '', content: '' },
      originalForm: '',
    };
  },
  mounted() {
    this.originalForm = JSON.stringify(this.form);
    this.$watch(
      () => JSON.stringify(this.form),
      (newVal) => {
        const isDirty = newVal !== this.originalForm;
        this.$store.commit('user/setConfirmLeave', isDirty);
      },
      { deep: true }
    );
  },
  methods: {
    submit() {
      // 模拟提交
      alert('提交成功');
      this.originalForm = JSON.stringify(this.form);
      this.$store.commit('user/setConfirmLeave', false);
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.$store.state.user.needConfirmLeave) {
      const confirm = window.confirm('表单未保存，确定要离开吗？');
      if (confirm) {
        this.$store.commit('user/setConfirmLeave', false);
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  beforeDestroy() {
    // 组件销毁时重置标志
    this.$store.commit('user/setConfirmLeave', false);
  },
};
</script>

7. 常见问题解答（FAQ）

Q1：为什么 Chrome 中自定义提示文字不生效？

A：出于安全考虑，Chromium 内核浏览器从 51 版本开始禁用了自定义提示，只显示"确认离开此网站吗？"这类固定文字。Firefox 和 Safari 也有类似限制。请接受这一现实。

Q2：beforeunload 中调用 return false 无效怎么办？

A：不要使用 return false，标准做法是：

javascript 复制代码

const event = e || window.event;
event.preventDefault();
event.returnValue = ''; // 兼容老浏览器

Q3：如何在关闭页面时判断用户是否真的需要提示（例如未保存的内容）？

A：维护一个"脏"标记（dirty flag），在表单内容变化时设置为 true，提交或重置后设置为 false。然后在 beforeunload 中检查该标记。

Q4：我的项目使用了 Nuxt.js / Next.js 服务端渲染，需要注意什么？

A：beforeunload 是浏览器 API，只能在客户端挂载后添加。确保在 mounted 或 useEffect 中添加监听，并处理好服务端渲染时的 window 未定义问题。

Q5：能否在 beforeunload 中发起异步请求（如保存草稿）？

A：不能。beforeunload 事件的时间非常短，且浏览器会立即卸载页面，异步请求大概率不会完成。建议在用户编辑时自动保存草稿到 localStorage 或 IndexedDB。

8. 总结

实现要点	推荐做法
添加监听	`window.addEventListener('beforeunload', handler)`
移除监听	在组件 `beforeDestroy` 或 `unmounted` 中移除
触发弹窗	`e.preventDefault()` + `e.returnValue = ''`
判断条件	使用 Vuex / Pinia 存储全局"脏"状态
路由内跳转	使用 `beforeRouteLeave` 配合 `window.confirm`
开发环境	通过 `process.env.NODE_ENV` 禁用或延迟监听

通过以上优化，你可以在 Vue 项目中实现可靠、友好的离开确认功能，既保护用户数据，又不影响正常操作。

如果您觉得本文对您有帮助，欢迎点赞、收藏、评论交流！

也欢迎关注我的 CSDN 专栏，获取更多 Vue 实战技巧。

本文为原创，转载请注明出处。代码示例基于 Vue 2.x，Vue 3 + Composition API 的实现思路类似，可自行迁移。

Vue 项目实现关闭/刷新浏览器窗口前的离开确认提示