Vue 踩坑之旅（二）：揭秘页面刷新与关闭时的监听技巧

2023-11-21 11:13:01

Vue.js 作为一种流行的 JavaScript 框架，为构建交互式 Web 应用程序提供了丰富而强大的功能。然而，在实际项目开发过程中，难免会遇到各种各样的问题和挑战。其中，监听页面刷新和关闭的操作经常让开发者感到困惑。

监听页面刷新

页面刷新是指用户单击浏览器中的刷新按钮或按 F5 键，从而重新加载当前页面。在 Vue 项目中，监听页面刷新可以通过使用 beforeDestroy 钩子函数来实现。

mounted() {
  window.addEventListener('beforeunload', this.handleUnload);
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleUnload);
},
methods: {
  handleUnload(event) {
    // 在页面刷新时执行的操作
  }
}

在上面的代码中，我们通过 window.addEventListener 方法在 mounted 钩子函数中监听 beforeunload 事件。当页面刷新时，beforeunload 事件将被触发，此时我们可以调用 handleUnload 方法来执行我们想要的操作，比如向服务器提交数据。

需要注意的是，beforeunload 事件并不能阻止页面刷新，因此我们需要在 handleUnload 方法中显式地调用 event.preventDefault() 方法来阻止默认的页面刷新行为。

监听页面关闭

页面关闭是指用户关闭浏览器窗口或标签页，从而导致当前页面被关闭。在 Vue 项目中，监听页面关闭可以通过使用 unload 事件来实现。

mounted() {
  window.addEventListener('unload', this.handleUnload);
},
beforeDestroy() {
  window.removeEventListener('unload', this.handleUnload);
},
methods: {
  handleUnload(event) {
    // 在页面关闭时执行的操作
  }
}