Vue踩坑之旅(二)—— 监听页面刷新和关闭

栏目: JavaScript · 发布时间: 5年前

内容简介:我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。将提交的一步操作放到 beforeDestroy 钩子函数中。但是发现  beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页。

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

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

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

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

所以还是要借助 onbeforeunload 事件。

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

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

Vue中监听页面刷新和关闭

1. 在methods中定义事件方法:

methods: {
  beforeunloadFn(e) {
    console.log('刷新或关闭')
    // ...
  }
}复制代码

2. 在created 或者 mounted 生命周期钩子中绑定事件

created() {
  window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}复制代码

3. 在 destroyed 钩子卸载事件

destroyed() {
  window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}复制代码

测试了页面刷洗和关闭都能监听到。

回到我自己的项目,可以使用 onbeforeunload 事件和 beforeDestroy 钩子函数结合:

created() {
  this.initCart()
  window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
  this.finalCart() // 提交购物车的异步操作},
destroyed() {
  window.removeEventListener('beforeunload', this.updateHandler)},
methods: {
  updateHandler() {
    this.finalCart()
  },
  finalCart() {
    // ...
  }
}复制代码

以上所述就是小编给大家介绍的《Vue踩坑之旅(二)—— 监听页面刷新和关闭》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Hacking Growth

Hacking Growth

Sean Ellis、Morgan Brown / Crown Business / 2017-4-25 / USD 29.00

The definitive playbook by the pioneers of Growth Hacking, one of the hottest business methodologies in Silicon Valley and beyond. It seems hard to believe today, but there was a time when Airbnb w......一起来看看 《Hacking Growth》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具