首页 > 其他分享 >VUE监听网页关闭和隐藏显示(页签关闭调用某一个接口)

VUE监听网页关闭和隐藏显示(页签关闭调用某一个接口)

时间:2023-11-07 16:55:05浏览次数:38  
标签:VUE res await id window 关闭 async 监听

mounted() {
    
  this.id = this.$route.query.id;

    window.addEventListener(
      "beforeunload",
      async (e) => await 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));
  },
methods: {
    async unloadHandler(){
        await this.send();
    },
    async beforeunloadHandler(e) {
      await this.send();
      if (e) {
        e = e || window.event;
        console.log(e);
        if (e) {
          e.returnValue = "关闭提示";
        }
        return "关闭提示";
      }
    },
    async send() {
      await this.$axios.get(`/api/master/visual-script/unlock/${this.id}`).then((res) => {
        if (res.data.code == 200) {
          console.log("离开Http可视化脚本编辑页面", res.data.data);
        }
      });
    },

}

参考博主:https://blog.csdn.net/qq_42717015/article/details/129944355

https://blog.csdn.net/qq_39928481/article/details/129838973

标签:VUE,res,await,id,window,关闭,async,监听
From: https://www.cnblogs.com/web-aqin/p/17815368.html

相关文章

  • Gin+Vue+微服务打造秒杀商城,打造高并发抢购平台
    gin+vue实战后端:用户管理用户列表登录/登出商品管理商品的增上改查活动管理商品关联成功率redis队列,不成功的回到队列继续,成功的从队列删除结束难点:代码和部署完全隔离怎么避免雪崩根据后端承载能力,进行限流和过载保护使用redis承载海量QPSmysql性......
  • vue3 axios 获得基地址
    1.位置 //axios基础的封装importaxiosfrom'axios'import'element-plus/es/components/message/style/css'import{ElMessage}from'element-plus'consthttpInstance=axios.create({baseURL:'http://laravel.cn',//基......
  • Vue源码学习(十五):diff算法(二)交叉比对(双指针)
    好家伙, 本节来解决我们上一章留下来的问题,新旧节点同时有儿子的情况本章继续解决 1.要做什么?本章将解决,1.在相同tag下子元素的替换问题2.使用双指针进行元素替换,实现效果如下: letvm1=newVue({data:{name:'张三'}})letrender1=compileToFunc......
  • vue:视情况绑定对应的校验。
    需求:表格内输入参数的默认值,有的参数必须,有的参数可为空,通过某个属性控制。 写两个校验规则,一个是必须有值,一个是可以为空。 首先将要校验的字段绑定在form-item的prop上。随后通过判断控制属性去绑定对应的校验规则。 ......
  • vue:通过数组循环创建表格,表格中有输入框需校验,最后需要一次性校验所有表格。
    表格内有form表单,form表单绑定的model数据类型必须为对象。所以需要先处理一下接口请求回来的数据。 表单需要校验,校验要用到ref,所以通过索引给每个表单生成自己专属的ref。 统一写一个校验规则,绑定至form表单中的rules中,随后在表格内的输入框form-item中绑定对应的规定。......
  • 在Mac上关闭Microsoft AutoUpdate 弹框提示
    1、打开terminal终端,输入文件地址 cd/Library/Application\Support/Microsoft/MAU2.0 2、将此应用程序权限设置为000,输入密码sudochmod000Microsoft\AutoUpdate.appPassword:  3、完成(如下) TRANSLATEwithxEnglishArabicHebrewPolish......
  • vue 大文件分片上传(断点续传、并发上传、秒传)
    对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率。本文是基于springboot+vue实现的文件上传,本文主要介绍vue实现文件上传的步骤......
  • windows/win10/win11 关闭端口 跑的服务
    起因关闭了编辑器访问服务接口正常显示解决这里的端口为5000C:\Users\43701>netstat-aon|findstr"5000"TCP127.0.0.1:50000.0.0.0:0LISTENING11172TCP127.0.0.1:5390127.0.0.1:5000TIME_WAIT0C:\U......
  • vue
    1、声明私有过滤器和全局过滤器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><p>message的值是:{{messag......
  • vue3 devtool
    打开控制台,输入下面代码:varvue=app.__vue_app__consthook=window['__VUE_DEVTOOLS_GLOBAL_HOOK__']hook.emit('app:init',vue,vue.version,{Fragment:'Fragment',Text:'Text',Comment:'Comment',......