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();
}

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

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunlo ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
vue监听浏览器刷新和关闭；
注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的:如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template><div>< ...
vue项目中监听页面刷新和关闭
在实际开发项目中,有时候我们需要在刷新和关闭时,触发一些功能,那么如何监听到页面的刷新和关闭呢? 1. 在methods中定义事件方法: methods: {beforeunloadFn(e) {co ...
Vue中监听页面刷新和关闭beforeunload事件
代码在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...
监听浏览器刷新/关闭页面
首先,使用onunload或onbeforeunload可以监听浏览器关闭事件,但是无法区分关闭与刷新.以下js代码可以部分监听关闭浏览器的事件! 可以在标签中添加方法: <!DOCTYPE h ...
h5监听浏览器返回，关闭浏览器
需求监听浏览器返回,点击返回时,显示弹窗,弹窗中有两个按钮,a按钮:关闭当前浏览器,b按钮:关闭弹窗 mounted(){// 向历史记录中插入了当前页,//为了ios首次进入页面出现底部返回按钮i ...
浏览器刷新和关闭事件
现在谷歌和火狐不能自定义浏览器的弹出窗,只能显示各自系统定义通用字段: 我们在监听浏览器的刷新和关闭前,先了解浏览器对事件的执行步鄹不同的浏览器刷新和关闭时对onbeforeunload()和onu ...
vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...

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

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

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

最新文章

热门文章