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 3.0 全家桶抢先体验

    Vue 3.0 全家桶抢先体验

    这篇文章主要介绍了Vue 3.0 全家桶抢先体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue3实现局部页面刷新效果的示例详解

    vue3实现局部页面刷新效果的示例详解

    这篇文章主要为大家详细介绍了vue3如何采用 App.vue定义全局变量与方法并实现局部页面刷新效果,文中的示例代码讲解详细,需要的可以参考一下
    2024-01-01
  • 解决vue.js出现Vue.js not detected错误的问题

    解决vue.js出现Vue.js not detected错误的问题

    这篇文章主要介绍了解决vue.js出现Vue.js not detected错误的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 如何在Vue.js项目中使用Jest进行单元测试

    如何在Vue.js项目中使用Jest进行单元测试

    在众多测试框架中,Jest 因其易用性、强大功能以及与 Vue.js 的良好兼容性,成为了许多开发者的首选,本文将详细介绍如何在 Vue.js 项目中使用 Jest 进行单元测试,需要的可以参考下
    2024-11-11
  • Vue将数组转换为树形结构的两种实现方式

    Vue将数组转换为树形结构的两种实现方式

    这篇文章主要介绍了Vue将数组转换为树形结构的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-06-06
  • 基于vue 开发中出现警告问题去除方法

    基于vue 开发中出现警告问题去除方法

    下面小编就为大家分享一篇基于vue 开发中出现警告问题去除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • vue实现登录界面

    vue实现登录界面

    这篇文章主要为大家详细介绍了vue实现登录界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Vite实现图片压缩的四种有效方法

    Vite实现图片压缩的四种有效方法

    原主流插件 vite-plugin-imagemin 已不兼容 Vite5,会导致构建失败,本文整理了 4 种适用于 Vite5 及以下版本的图片压缩方案,涵盖插件化与自定义脚本,兼顾易用性与灵活性,需要的朋友可以参考下
    2025-08-08
  • 解决vue-cli webpack打包开启Gzip 报错问题

    解决vue-cli webpack打包开启Gzip 报错问题

    这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 使用vite项目打包资源分配目录

    使用vite项目打包资源分配目录

    这篇文章主要介绍了使用vite项目打包资源分配目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论