Vue3 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件，用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框（实时监听用户关闭或刷新网页，触发时文字提醒并执行自定义操作）

已于 2025-01-19 16:50:39 修改
阅读量4.5k 收藏 5
点赞数 3
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： vue关闭刷新页面前提示确认 销毁监听浏览器关闭刷新事件 仅在某页面监听浏览器关闭与刷新 vue3电脑pc和手机h5网页 vu监听浏览器刷新关闭前进后退 vue手机端H5网页如何监听关 移动端h5页面监听刷新与关闭
于 2023-11-02 22:37:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/134180009
版权
+ Vue3 同时被 2 个专栏收录
254 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue3 开发问题汇总
147 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在 Vue3 项目中如何监听浏览器的刷新、关闭、前进和后退事件，并在这些事件触发时弹出提示框，允许用户在离开或刷新页面前执行自定义操作。内容包括局部和全局监听的实现方法，适用于PC和手机H5页面，同时提供了注意事项和SEO相关的信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

如果您需要 Vue2 版本，请访问 这篇文章。

实现了在 vue3 | nuxt3 网站项目中，实时监听浏览器的关闭、刷新、前进后退等，当被点击时阻止默认行为和弹出文字提示框（告知用户），当用户确认离开页面时执行一个函数或一段代码等！完美兼容所有浏览器，支持电脑 PC 网页、手机移动端 H5 页面。

如下图所示，支持给 “局部（单独页面）” 设置监听，也可以 “全局（全部页面）” 设置，

示例代码干净整洁，无任何乱七八糟的代码

在这里插入图片描述

局部监听（源码）

您可以仅给 “某个单独的页面” 设置监听，也可以让整个网站全局监听。

了解本专栏 订阅专栏 解锁全文
Vue2 - [兼容PC和手机H5] 详细监听浏览器刷新 / 关闭 / 前进后退事件，用户点击关闭和刷新页面前 “拦截“ 操作并弹出提示框（实时监听用户关闭或刷新网页，触发时文字提醒并执行自定义操作）
王二红
11-02 2456
vue监听页面关闭和刷新，vue中如何监听页面刷新和关闭事件，vue中监听浏览器窗口关闭事件,并在窗口关闭进行操作，vue怎么知道用户关闭了网页，vue如何监听刷新网页操作并截断，vue移动端手机h5网页手机网站监听浏览器刷新关闭，vue当页面关闭或刷新时怎么提示用户离开不保存数据，vue项目监听浏览器窗口或标签页关闭，并在页面关闭/刷新前发送请求，vue怎么只在某个页面监听,其他页面不监听，vue监听刷新和关闭怎么离开页面时注销释放，vue怎么阻止浏览器前进和后退并提示，页面跳转离开后依旧可以监听到刷新和
【Vue实用功能】Vue监听浏览器刷新和关闭事件
weixin_44590591的博客
10-11 4188
【Vue实用功能】Vue监听浏览器刷新和关闭事件。 在前端开发中，我们通常会遇到这样的需求，用户离开、刷新页面前，修改数据未进行保存操作，需要提示框提醒用户。
vue3监听浏览器刷新，解决监听方法不执行问题
Anyuegogogo的博客
04-29 1895
vue3监听浏览器刷新，解决监听方法不执行问题
Vue3实现一个关不掉的弹窗
qq_54140719的博客
04-23 984
使用Vue3完成一个关不掉的弹窗，只能通过指定方法关闭，通过控制台修改样式，删除节点都不可以
vue3监听窗口刷新或者关闭
80岁小姑娘的博客
10-18 5549
【代码】vue3监听窗口刷新或者关闭。
vue监听切换不同浏览器、窗口页面数据及时刷新
qq_46617584的博客
02-17 1861
vue监听切换不同浏览器、窗口页面数据及时刷新
vue 监听浏览器关闭或刷新事件
xuelong的博客
12-25 2664
web项目中使用socket时，涉及到关闭刷新浏览器多次连接问题，其中一个解决方法是在关闭或刷新浏览器时，将连接断开。
vue监听浏览器的后退和刷新事件，阻止默认的事件
热门推荐
成在坚持，贵在坚持
09-02 1万+
vue监听浏览器的后退和刷新事件 浏览器的后退事件 浏览器的后退按钮，默认是返回上一个路径的页面，可是如果我们当前的页面有数据没有被保存的话，点击后退按钮应该加一层判断，也是提示用户是否需要去保存页面的内容。如果不保存，直接返回。所以需要阻止浏览器的后退按钮，只有在满足了条件后才执行事件 //1 首先进入页面的时候需要监听浏览器的后退按钮，之后在操作的时候执行函数,在mounted中挂载去监听这个事件，并在methods里面添加函数，用来判断执行的条件 mounted() { if (window
vue3项目监听浏览器的返回按键事件
weixin_48420104的博客
09-12 1683
有这样一个需求，当在用户在浏览器点击返回按钮的时候，需要弹出当前组件的退出确认框。并且如果当前页面有个已经打开了的弹窗时，弹窗还没关闭就点击浏览器的返回按钮，要求点击返回时，弹窗要关闭。在组件被卸载时，确保移除事件监听器，避免内存泄漏。当用户点击浏览器返回按钮时，会触发。当组件被挂载时，添加了一个。
Vue3项目中禁止浏览器回退或前进功能
m0_50298323的博客
06-13 3967
总结：若是需要全局禁用则可在。
vuejs中监听窗口关闭和窗口刷新事件的方法
12-03
1、使用[removed]之类的API [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
Vue 禁用浏览器的前进后退操作
10-14
在Vue应用程序中，有时我们需要控制浏览器的前进后退（前进/后退按钮）操作，以满足特定的用户体验需求。在本文中，我们将深入探讨如何在Vue中禁用或管理这些功能，以及与`history`对象相关的一些核心概念。 首先，...
在vue中阻止浏览器后退的实例
10-16
这段代码的主要作用是在用户点击浏览器的后退按钮时，通过监听`popstate`事件，使用`pushState`方法把当前页面的URL添加到历史记录中。这使得每次点击后退按钮时，浏览器都会重新导航到当前页面，从而达到阻止后退的...
vue3实现H5监听浏览器回退并阻止回退
Bxy_123456789的博客
10-13 6334
当你的移动端页面有弹窗的组件并且这个组件不是来自于某些知名的组件库，你是否有这样的需求？当用户唤起弹窗之后又按下了手机自带的回退键，弹窗之前的页面也被关掉了，而用户本身的意愿是关掉弹窗而已。如果你也有这样的诉求，这篇文章帮你解决！ 1.给history增加一条记录 手机自带的回退键默认是回到上一个页面，所以我们用watch监听，在弹窗弹起的时候我们给history添加一条记录保证在按下回退键后能保持在当前页（用到的是vue3的监听），我这个页面有三个弹窗，同时监听三个变量，当为true时弹窗唤起，记得.
vue项目使用js监听浏览器关闭、刷新、后退事件
weixin_52443895的博客
06-02 9681
在项目的某些页面中，在执行某些接口调用过程的时候，如果用户选择刷新、关闭或者后退浏览器。有可能会造成接口被阻断，所以可能你会需要js监听浏览器关闭、刷新、后退事件，在进行这些操作的时候给个提示。
VUE3 判断浏览器窗口是关闭还是刷新事件，并清空localStorage数据
weixin_43485503的博客
10-16 1400
需求：当浏览器当前窗口关闭的时候，执行清空localStorage缓存数据的操作（清空token），再次进入需重新登录。
vue3项目区分刷新和关闭浏览器窗口实现
jidaotianzun的博客
08-23 785
解释：页面加载时先读取回话的isReloading，如果存在说明为刷新，不存在时说明是初次打开。此时需要先向session中保存isReloading，值可以不为true，但是要保证使用!isReloading可以正常判定，然后开启一个延时器，时间可以自己设置，但不建议延时时间太长，防止多次刷新时出现问题。这是为了防止跳转到登录页时，本地还没有来的及缓存isReloading，出现一直刷新的问题。注意：一定要放在session中，这样浏览器窗口关闭时也会清除session中的信息，保证代码的正常运行。
Vue3在监听路由刷新或重新加载时，监听路由
繁若华尘的博客
02-23 888
根据实际需求选择合适的方式，通常推荐优先使用生命周期钩子和路由监听。
vue浏览器刷新页面事件
最新发布
05-23
### Vue.js 监听浏览器刷新事件的实现方式 在 Vue.js 中，监听浏览器刷新事件通常通过 `beforeunload` 事件来实现。以下是几种常见的实现方法： #### 方法一：使用 `beforeunload` 事件 可以在组件生命周期钩子 `mounted` 和 `destroyed` 中分别绑定和移除 `beforeunload` 事件监听器。 ```javascript export default { mounted() { window.addEventListener('beforeunload', this.handleBeforeUnload); }, beforeDestroy() { window.removeEventListener('beforeunload', this.handleBeforeUnload); }, methods: { handleBeforeUnload(event) { event.preventDefault(); event.returnValue = ''; // 兼容某些浏览器 console.log('页面即将刷新或关闭'); } } }; ``` 此方法可以捕获到用户的操作行为并执行相应的逻辑[^2]。 --- #### 方法二：结合 `performance.navigation.type` 判断刷新或关闭 为了进一步区分是页面刷新还是关闭，可以利用 `performance.navigation.type` 属性进行判断。 ```javascript if (performance.navigation && performance.navigation.type === 1) { console.log('这是一个刷新页面的操作'); // 页面刷新 } else { console.log('这是其他类型的导航操作'); // 页面加载或其他情况 } ``` 需要注意的是，在现代浏览器中，`performance.navigation` 已被废弃，建议改用 `PerformanceNavigationTiming` 接口替代[^1]。 --- #### 方法三：全局注册事件监听器 如果希望在整个应用范围内监听刷新事件，可以直接在入口文件（如 `main.js` 或 `App.vue` 的根实例）中设置监听器。 ```javascript // main.js window.addEventListener('beforeunload', function (event) { const confirmationMessage = '您确定要离开吗？'; event.returnValue = confirmationMessage; return confirmationMessage; }); ``` 这种方式适用于不需要动态解绑的情况，但如果需要更灵活的控制，则推荐在具体组件中处理[^4]。 --- #### 方法四：基于路由守卫增强体验 当涉及特定路由下的刷新检测时，可结合 Vue Router 提供的导航守卫功能完成定制化需求。 ```javascript router.beforeEach((to, from, next) => { if (from.name !== to.name) { console.log('切换到了新的路由'); } else { console.log('可能发生了页面刷新'); } next(); }); ``` 这种方法特别适合用于复杂业务场景下对用户交互行为的精细化管理[^5]。 --- ### 注意事项 - 使用 `beforeunload` 事件时需注意兼容性问题以及返回值的要求。 - 如果仅依赖前端手段难以满足实际需求，还可以考虑配合服务端记录状态等方式补充完善逻辑。 - 对于老旧 API 如 `performance.navigation` 应及时迁移到最新标准以保障跨平台稳定性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值