vue监听浏览器网页关闭和网页刷新事件代码示例
更新时间：2023年08月11日 11:00:58 作者：衫裤泡露
在前端开发中我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户,这篇文章主要给大家介绍了关于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监听浏览器网页关闭内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中实现路由跳转的三种方式超详细教程，其中声明式router-link实现跳转最简单的方法，可用组件router-link来替代a标签，每种方式给大家讲解的非常详细需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了vue 面包屑导航组件封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
本文主要介绍了Vue不能监听(watch)数组变化的解决方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法
这篇文章主要介绍了Vue3+Element-Plus使用Table预览图片发生元素遮挡的问题分析和解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了基于mpvue的简单弹窗组件mptoast使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vuex如何在非组件中调用mutations方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章给大家介绍了如何解决keep-alive同一个组件不缓存问题,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令)
这篇文章主要介绍了vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。今天我们来介绍VueJs 搭建Axios接口请求工具，需要的朋友参考下本文吧2017-11-11
最新评论