Vue监听浏览器关闭(或者刷新)、切换标签页触发事件

<script>
   export default {
    
    
  name: 'App',
  mounted() {
    
    
    /*浏览器标签页切换会触发"visibilitychange"事件*/
    document.addEventListener("visibilitychange", e=>{
    
    
    //隐藏标签
      if(document.visibilityState === "hidden"){
    
    
        this.handleFn()
      }
      //切换显示标签
      if(document.visibilityState === "visible"){
    
    
        
      }
    })
    /*浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"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)
    }
  }
}

参考：https://blog.csdn.net/Tjohn9/article/details/129412468