使用VUE监控浏览器窗口关闭时向后台发送请求

因为在项目中实现在线播放视频时，当用户直接关闭浏览器窗口，需要记录用户观看视频的进度所以用到监听窗口关闭事件。先是在网上查了一下，然后根据网上大佬博客然后自己修改之后最终测试成功！
下面是代码：

<template>
  <div class="video-container"></div>
</template>

<script>
export default {
  data () {
    return {
      userId: '',
      beforeUnloadTime: '',
      gapTime: ''
    }
  },
  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))
  },
  methods: {
    beforeunloadHandler(){
      this.beforeUnloadTime=new Date().getTime();
    },
    unloadHandler(e){
      this.gapTime=new Date().getTime()-this.beforeUnloadTime;
      //判断是窗口关闭还是刷新
      if(this.gapTime<=5){
        var img = document.createElement("img");
        //src是自己的后端地址以及参数(参数看自己需求)
        img.src = this.$http.adornUrl(`/sys/user/updateUserInfo?userId=${this.userId }&token=${this.$cookie.get('token')}`);
        //将img加到body中时就会立刻发送请求
        document.body.appendChild(img);
      }
    }
  }
}
</script>

如果有什么问题，欢迎提问相互交流。