vue 监听页面刷新或关闭

参考：https://blog.csdn.net/weixin_43915587/article/details/93628935发现 beforeDestroy 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。所以还是要借助 onbeforeunload 事件。顺便复习了一下 JavaScript 中的一些加载，卸载事件：页面加载时只执行 onload 事件。页面关闭时，先 onbefo

qq_46302247

9219人浏览 · 2022-05-07 15:22:43

qq_46302247 · 2022-05-07 15:22:43 发布

参考：https://blog.csdn.net/weixin_43915587/article/details/93628935

发现 beforeDestroy 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。所以还是要借助 onbeforeunload 事件。

顺便复习了一下 JavaScript 中的一些加载，卸载事件：
页面加载时只执行 onload 事件。
页面关闭时，先 onbeforeunload 事件，再 onunload 事件。
页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件。

注意：用window监听的事件，在页面销毁前记得移除；否则切换路由后，依然在监听

//自己测试
 created() {
   window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
 },
 
 destroyed() {
   window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
 },
 
  methods: {
    beforeunloadFn(e) {
      console.log(e, '刷新或关闭');
      this.finalCart()
    },
    finalCart() {
    	//调接口
	}
  }

有的同学说监听不到刷新，其实仔细观察会发现控制台打印了“刷新或关闭”，只是很快页面就刷新了，所以看不到，但是beforeunloadFn函数是会执行的

//参考原文
created() {
  this.initCart()
  window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
  this.finalCart() // 提交购物车的异步操作},
destroyed() {
  window.removeEventListener('beforeunload', this.updateHandler)},
methods: {
  updateHandler() {
    this.finalCart()
  },
  finalCart() {
    // ...
  }
}