vue监听浏览器网页关闭和网页刷新事件代码示例
作者：衫裤泡露
在前端开发中我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户,这篇文章主要给大家介绍了关于vue监听浏览器网页关闭和网页刷新事件的相关资料,需要的朋友可以参考下
1、监听浏览器页面关闭/刷新事件
运用场景：浏览器页面关闭后删除local storage、session、cookie、发送请求等。
//绑定监听事件
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}
methods: {
beforeunloadHandler(e) {
console.log('关闭后=>为所欲为')
}
},
//页面销毁前解除监听
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}2、只监听浏览器关闭事件
data(){
return{
beforeUnload: '',
Handler: ''
}
}
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.addEventListener('unload', e => this.unloadHandler(e))
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e))
},
ethods: {
beforeunloadHandler(){
this.beforeUnload=new Date().getTime();
},
unloadHandler(e){
this.Handler=new Date().getTime()-this.beforeUnload;
//判断是窗口关闭还是刷新
if(this.Handler<=5){
console.log('为所欲为');
}
},
}总结
到此这篇关于vue监听浏览器网页关闭和网页刷新事件的文章就介绍到这了,更多相关vue监听浏览器网页关闭内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！