Vue3：未保存数据时页面离开自定义弹窗不显示如何解决？

你之前的问题出在beforeunload事件的浏览器限制上：这个事件里，浏览器会接管确认逻辑，不允许触发自定义弹窗，而且异步的响应式更新（比如修改wantToLeavePage.value）不会生效——因为浏览器会同步处理这个事件，不会等待Vue的渲染流程。

要实现需求，得分两种场景处理：

1. 页面刷新/关闭：用浏览器默认提示 #

对于页面刷新、关闭标签页这类操作，只能通过beforeunload触发浏览器自带的确认框，无法显示自定义弹窗，但可以配置提示文本（部分浏览器会忽略自定义文本，只显示默认内容）：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 标记是否有未保存数据
const hasUnsavedChanges = ref(false);
let beforeUnloadHandler: (event: BeforeUnloadEvent) => void;

onMounted(() => {
  beforeUnloadHandler = (event: BeforeUnloadEvent) => {
    if (hasUnsavedChanges.value) {
      // 阻止默认行为，触发浏览器确认框
      event.preventDefault();
      // 设置提示文本（部分浏览器不显示）
      event.returnValue = '你有未保存的更改，确定要离开吗？';
    }
  };
  window.addEventListener('beforeunload', beforeUnloadHandler);
});

// 组件卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  window.removeEventListener('beforeunload', beforeUnloadHandler);
});
</script>

2. 路由跳转：显示自定义弹窗 #

如果是单页应用内的路由跳转，可以用Vue Router的onBeforeRouteLeave钩子，这时候完全可以控制自定义弹窗的显示：

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, onBeforeRouteLeave } from 'vue-router';

const hasUnsavedChanges = ref(false);
const router = useRouter();
// 控制自定义弹窗显示
const showLeaveModal = ref(false);
// 暂存目标路由
const targetRoute = ref<any>(null);

// 监听路由离开事件
onBeforeRouteLeave((to, from, next) => {
  if (hasUnsavedChanges.value) {
    showLeaveModal.value = true;
    targetRoute.value = to;
    next(false); // 先阻止跳转
  } else {
    next(); // 无未保存数据，直接放行
  }
});

// 确认离开的逻辑
const confirmLeave = () => {
  showLeaveModal.value = false;
  router.push(targetRoute.value);
};

// 取消离开的逻辑
const cancelLeave = () => {
  showLeaveModal.value = false;
};
</script>

<template>
  <!-- 自定义弹窗 -->
  <div v-if="showLeaveModal" class="leave-modal">
    <div class="modal-box">
      <h3>提示</h3>
      <p>你有未保存的更改，确定要离开当前页面吗？</p>
      <div class="modal-buttons">
        <button @click="confirmLeave" class="confirm-btn">确定离开</button>
        <button @click="cancelLeave" class="cancel-btn">取消</button>
      </div>
    </div>
  </div>

  <!-- 你的页面内容示例 -->
  <input v-model="someFormData" @input="hasUnsavedChanges = true" placeholder="输入内容测试" />
</template>

<style scoped>
.leave-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-box {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 360px;
  text-align: center;
}

.modal-buttons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-btn {
  background: #ef4444;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  background: #e5e7eb;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

关键说明 #

• 页面刷新/关闭属于浏览器级别的操作，受安全限制，无法自定义弹窗，只能依赖浏览器默认提示。
• 路由跳转属于应用内操作，可以完全自定义弹窗逻辑，这也是用户通常更在意的场景。
• 记得在组件卸载时移除beforeunload的监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Norris_Akg