Vue 页面关闭监听及操作指南

在 Vue 中，可以通过'beforeDestroy'生命周期钩子来监听页面关闭事件，并在该钩子中进行页面关闭操作。

例如，在 Vue 组件中添加'beforeDestroy'钩子，可以在该钩子中执行一些清理操作，例如清空定时器、关闭 WebSocket 连接等。

export default {
  // ...
  beforeDestroy() {
    // 执行页面关闭操作
    console.log('页面即将关闭');
    // 清空定时器
    clearInterval(this.timer);
    // 关闭 WebSocket 连接
    this.socket.close();
  },
  // ...
}

此外，如果需要在页面关闭前进行一些操作，例如提示用户或保存数据等，可以监听'beforeunload'事件，该事件会在用户关闭页面或刷新页面时触发。

window.addEventListener('beforeunload', function (event) {
  // 在页面关闭前进行一些操作
  event.preventDefault();
  event.returnValue = '';
});

在上述示例中，我们通过event.preventDefault()方法阻止了默认的窗口关闭行为，并使用event.returnValue = ''方法设置了一个空字符串，以便提示用户是否关闭页面。