【Vue实用功能】Vue监听浏览器刷新和关闭事件

Vue监听浏览器刷新和关闭事件

在前端开发中,我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户

效果实现

methods: {
	/** 在刷新和关闭之前询问 **/
	beforeRefreshClose() {
		let self = this;
		window.onbeforeunload = function (e) {
			if (self.$route.name == "路由名称") {
				e = e || window.event;
				// 兼容IE8和Firefox 4之前的版本
				if (e) e.returnValue = "关闭提示1";
				// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
				return "关闭提示2";
			} else window.onbeforeunload = null;
		};
	},
},
mounted() {
	this.beforeRefreshClose();
}

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值
>