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监听浏览器网页关闭内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

element实现二级菜单和顶部导航联动的示例
本文主要介绍了element实现二级菜单和顶部导航联动的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
uniapp中easycom用法实例详解
easycom是Uniapp框架中非常方便的组件自动注册机制，可以大大简化组件的使用和管理，这篇文章主要介绍了uniapp中easycom用法详解,需要的朋友可以参考下
2023-03-03
VUE+elementui组件在table-cell单元格中绘制微型echarts图
这篇文章主要介绍了VUE+elementui组件在table-cell单元格中绘制微型echarts图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue data的数据响应式到底是如何实现的
这篇文章主要介绍了Vue data的数据响应式到底是如何实现的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
Vue vant-ui使用van-uploader实现头像上传功能
这篇文章主要介绍了Vue vant-ui使用van-uploader实现头像图片上传,项目中是使用有赞vant-ui框架实现的头像上传替换功能，用到了封装的图片压缩封装之后再去上传图片this.$imgUpload.imgZip(），本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2022-05-05
Vue学习笔记进阶篇之多元素及多组件过渡
本篇文章主要介绍了Vue学习笔记进阶篇之多元素及多组件过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue css 引入asstes中的图片无法显示的四种解决方法
这篇文章主要介绍了vue css 引入asstes中的图片无法显示的几种解决方案,本文给出了四种解决方法，每种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
你点的 ES6一些小技巧,请查收
本文给大家总结ES6新特性：默认参数、reduce、解构赋值和Set在使用时的一些小技巧。需要的朋友参考下吧
2018-04-04
解决element-ui中下拉菜单子选项click事件不触发的问题
今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue 使用lodash实现对象数组深拷贝操作
这篇文章主要介绍了vue 使用lodash实现对象数组深拷贝操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09