vue3监听浏览器刷新，解决监听方法不执行问题

暗月Moon

于 2024-04-29 11:11:59 发布

阅读量1.8k

点赞数 3

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

本文链接：https://blog.youkuaiyun.com/Anyuegogogo/article/details/138306162

版权

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍了如何在React组件的生命周期方法`onMounted`和`onBeforeUnmount`中处理`beforeunload`事件，以便在浏览器刷新时关闭WebSocket连接，防止数据丢失。

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

onMounted(() => {
	window.addEventListener('beforeunload', handleBeforeUnload);
});

onBeforeUnmount(() => {
	window.removeEventListener('beforeunload', handleBeforeUnload);
});


/**
 * 页面刷新处理
 */
const handleBeforeUnload = (event: any) => {
	// 在此处可以进行一些处理

	// 在此处可以进行一些处理
	// serverWebsocket.close();
	// agentWebsocket.close();
	// 直接用变量 不执行、改调用方法 方法内的可以执行
	closeAgentwebsocket();
	console.log('浏览器即将刷新...', agentWebsocket);
	// event.preventDefault();
	// return '您有未保存的更改，确定要离开吗？';
};

const closeAgentwebsocket = () => {
	agentWebsocket.close();
};