Vue3监听浏览器刷新/关闭/前进/后退事件【兼容pc+h5】

最新推荐文章于 2025-07-28 00:00:26 发布

我在北京coding

最新推荐文章于 2025-07-28 00:00:26 发布

阅读量468

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2401_89806660/article/details/148539559

Vue3 专栏收录该内容

46 篇文章 ¥19.90 ¥99.00

订阅专栏

完整源码如下：（可放局部or全局）

<script setup>
import { onMounted } from 'vue'

// 注入网页关闭/刷新/前进后退阻止器
// 监听操作并执行函数
onMounted(() => {
  // beforeunload方法垫片
  unloadshim()
  window.addEventListener('beforeunload', e => handleUnload(e))
})

// 注入网页关闭/刷新/前进后退阻止器
const unloadshim = () => {
    window.onbeforeunload = (e) => {
      e = e || window.event;
      // 适配IE8, Firefox 4之前版本
      if (e) e.returnValue = '关闭提示';
      // 适配Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    }
}

// 执行函数或方法
const handleUnload = (e) => {
  console.log(e)
  // 您的代码...
}

</script>

<template>
  <div>
     beforeunload
  </div>
</template>