如何实现Vue中监听页面刷新与关闭的事件功能?

更新于
2026-10-03 03:44:34
0阅读来源:SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计512个文字,预计阅读时间需要3分钟。

我在做项目时,遇到一个需求,离开(跳转或关闭)购物车页面或刷新购物车页面时,需要向服务器提交一次购物车商品数量的变化。将这一步操作放在beforeDestroy钩子函数中。

我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。

将提交的一步操作放到 beforeDestroy 钩子函数中。

beforeDestroy() { console.log('销毁组件') this.finalCart()},

但是发现 beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页。

所以还是要借助onbeforeunload 事件。

顺便复习了一下 JavaScript 中的一些加载,卸载事件:

  • 页面加载时只执行onload 事件。
  • 页面关闭时,先onbeforeunload 事件,再onunload 事件。
  • 页面刷新时先执行onbeforeunload 事件,然后onunload 事件,最后onload 事件。
阅读全文

本文共计512个文字,预计阅读时间需要3分钟。

我在做项目时,遇到一个需求,离开(跳转或关闭)购物车页面或刷新购物车页面时,需要向服务器提交一次购物车商品数量的变化。将这一步操作放在beforeDestroy钩子函数中。

我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。

将提交的一步操作放到 beforeDestroy 钩子函数中。

beforeDestroy() { console.log('销毁组件') this.finalCart()},

但是发现 beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页。

所以还是要借助onbeforeunload 事件。

顺便复习了一下 JavaScript 中的一些加载,卸载事件:

  • 页面加载时只执行onload 事件。
  • 页面关闭时,先onbeforeunload 事件,再onunload 事件。
  • 页面刷新时先执行onbeforeunload 事件,然后onunload 事件,最后onload 事件。
阅读全文