vue区分页面关闭和刷新,看这一篇就够了

首先我们要了解关闭和刷新所用到的事件

页面加载时只执行onload
页面关闭时只执行onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。这样我们可以在onbeforeunload中加一个标记,在onunload中判断该标记,即可达到判断页面是否真的关闭了。

了解了这个的话就可以开始写代码了

首先我以下代码是实现刷新之后退出当前页面,返回上一页。

要实现其他的退出之后请求接口也是可以的,自行看备注实现

先在  methods里面写两个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
unloadFn() {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
         if(this._gap_time <= 5){
           //关闭浏览器执行的代码或者接口<br>        sessionStorage.clear();
          } else {
         //刷新我需要做的事情
           sessionStorage.setItem('reload',1)
       }
},
   beforeunloadFn(e) {
     this._beforeUnload_time = new Date().getTime();
     e = e || window.event;
     if (e) {
       e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
     }
     return "您是否确认离开此页面-您输入的数据可能不会被保存";
   }

注意!在旧版浏览器中可以自定义提示文案,既是return后面返回的参数
但在新版的浏览中,已经不支持自定义弹窗。只能调用浏览器自带的提示确认窗格

 

 

 

添加了方法我们需要加个监听事件来执行我们的代码
在cerated或者在methods里面加入

    var _t = this;
    if(!!sessionStorage.getItem("reload")){
    //刚刚解析了因为我实现的是刷新返回到上一页,所以刷新的时候我存了个sessionStorage,然后进来判断有这个就返回上一页,然后把sessionStorage去掉
      _t.$router.go(-1);
      sessionStorage.clear()
    }
    window.addEventListener("unload", e => this.unloadFn());
    window.addEventListener("beforeunload", e => this.beforeunloadFn(e));    

然后在离开当前页面的时候注销监听

 destroyed里面
    window.removeEventListener("unload", e => this.unloadFn());
    window.removeEventListener("beforeunload", e => this.beforeunloadFn());

 

这里实现的原理是根据时间差来实现

注意的是当在你按着f5不动的情况下,onbeforeunload与onunload的时间差也会小于5,从而执行了关闭页面的代码,不管很少人会按住不放

 

posted @   太禾  阅读(7122)  评论(2编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示