Vue监听浏览器关闭(或者刷新)、切换标签页，并发送请求给后端

最新推荐文章于 2024-07-23 14:27:20 发布

Tjohn9

最新推荐文章于 2024-07-23 14:27:20 发布

阅读量3.4k

点赞数

分类专栏： Web开发相关文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Tjohn9/article/details/129412468

版权

Web开发相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、代码(App.vue)

<script>
   export default {
  name: 'App',
  mounted() {
    /*浏览器标签页切换会触发"visibilitychange"事件*/
    document.addEventListener("visibilitychange", e=>{
      if(document.visibilityState === "hidden"){
        this.handleFn()
      }
    })
    /*浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"beforeunload"事件*/
    window.addEventListener('beforeunload', e => this.handleFn())

  },
  destroyed() {
    /*remove掉上面对应的"visibilitychange"事件监听*/
    document.removeEventListener("visibilitychange", e=>{
      if(document.visibilityState === "hidden"){
        this.handleFn()
      }
    })
    /*remove掉上面对应的"beforeunload"事件监听*/
    window.removeEventListener('beforeunload', e => this.handleFn())
  },
  methods:{
    handleFn(){
     /*处理逻辑*/
     //1、如果要发送请求，那么最好用navigator.sendBeancon(url)，它可以保证在浏览器页面销毁前，将请求发送出去。如果使用XMLHttprequest或者基于它实现的axios发送请求，那么可能出现浏览器关闭了，但是请求没有发送出去的情况。
     //2、如果单纯监听切换浏览器标签页、单纯监听刷新页面，那么可以使用axios发送请求
     //3、navigator.sendBeancon(url)默认发送POST请求
     //4、举例如下：
     const URL = process.env.VUE_APP_BASE_API+"/uploads/deleteAll"
     navigator.sendBeacon(URL)
    }
  }
}