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监听浏览器网页关闭内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理2024-02-02
vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解
这篇文章主要介绍了vue3 el-table结合seamless-scroll实现表格数据滚动,创建两个table，隐藏第一个table的body部分，这样就能得到一个固定的head，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
解决vue打包后刷新页面报错：Unexpected token <
这篇文章主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。2019-08-08
这篇文章主要介绍了axios中如何进行同步请求(async+await)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了elementUI多选框反选的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
父子组件通信是Vue中常见的场景,这篇文章主要为大家详细介绍了vue中父子组件相互传值的实现方法,文中的示例代码讲解详细,需要的小伙伴可以参考一下2023-12-12
这篇文章主要介绍了vue移动端写的拖拽功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了Vue + element-ui 背景图片设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下2018-04-04
最新评论