文章总结:

这篇文章介绍了在Vue前端开发中，如何在用户关闭浏览器页面时执行特定操作。通过在`mounted`钩子函数中添加`beforeunload`和`unload`事件监听器，并在`beforeDestroy`中移除这些监听器，可以有效地管理页面关闭事件。文章中提到，使用`beforeunloadHandler`方法记录页面即将关闭前的时间戳到`_beforeUnload_time`，然后在`handleWindowClose`方法中计算从页面即将关闭到现在的时间差`gap_time`。如果这个时间差大于5秒，则认为用户已经关闭了页面，此时可以执行一些后续操作，如发送请求或提示用户保存数据。

Vue监听关闭浏览器页面事件

  1. 在mounted钩子函数中添加beforeunload和unload时间监听器
  2. 设置一个方法beforeunloadHandler记录当前时间到_beforeUnload_time方便计算时间间隔
  3. 在 handleWindowClose 方法中，计算了时间间隔 gap_time，这是当前时间和 _beforeUnload_time 之间的差值。
  4. 如果 gap_time 大于 5 秒，则认为用户已经关闭了页面，此时可以执行一些操作，比如发送请求或提示用户保存数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.handleWindowClose(e));
    this.check();
  },
  beforeDestroy() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.handleWindowClose(e));
  },
  methods: {
    beforeunloadHandler() {
      this._beforeUnload_time = new Date().getTime();
    },
    handleWindowClose(event) {
      const gap_time = new Date().getTime() - this._beforeUnload_time;
      // 只关闭时执行
      if (gap_time <= 5) {
       关闭前执行的方法
      }
    },