Vue.js中如何检测页面刷新？求合适的实现位置与替代方案

嗨，我来帮你理清这个问题~ 其实Vue本身并没有专门的内置方法来直接检测页面刷新，但我们可以结合原生的window.onbeforeunload事件，在Vue的生命周期里合理配置，就能完美实现需求啦。

一、window.onbeforeunload该放在哪里？ #

最稳妥的位置是组件的**mounted生命周期钩子**（Vue 2选项式API）或者onMounted组合式API钩子（Vue 3），因为这时候组件已经挂载到DOM上，绑定window事件不会有问题。同时记得在组件卸载时移除监听，避免内存泄漏。

Vue 2 选项式API示例：

<script>
export default {
  mounted() {
    // 绑定页面刷新/关闭前的监听事件
    window.onbeforeunload = (event) => {
      // 这里写你要执行的逻辑，比如保存临时数据、清理缓存等
      console.log('页面即将刷新或关闭');
      
      // 如果需要弹出确认提示框，返回非空字符串（不同浏览器表现略有不同）
      event.returnValue = '确定要离开此页面吗？';
      return '确定要离开此页面吗？';
    };
  },
  beforeUnmount() {
    // 组件卸载时移除监听，防止内存泄漏
    window.onbeforeunload = null;
  }
}
</script>

Vue 3 组合式API示例：

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(() => {
  window.onbeforeunload = (event) => {
    // 执行你的自定义逻辑
    console.log('页面即将刷新或关闭');
    // 触发浏览器的离开确认提示
    event.returnValue = '确定要离开吗？';
    return '确定要离开吗？';
  };
});

onBeforeUnmount(() => {
  // 清理监听
  window.onbeforeunload = null;
});
</script>

二、一些需要注意的细节 #

• 关于确认提示框：不同浏览器对onbeforeunload的返回值处理有差异，部分浏览器会显示你自定义的提示文本，有些则会用浏览器默认的提示内容，这是浏览器的安全限制，没法完全自定义样式。
• 区分刷新和关闭：原生的onbeforeunload事件没法精准区分“页面刷新”和“关闭页面”，因为两种操作都会触发这个事件。如果一定要区分，可以尝试借助sessionStorage记录页面加载状态，但这种方法不是100%可靠，因为浏览器行为可能有差异。
• 内存泄漏问题：一定要在组件卸载时移除监听，否则如果组件被多次挂载/卸载，会重复绑定事件，导致逻辑重复触发，还可能造成内存泄漏。

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