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踩坑之旅(二)—— 监听页面刷新和关闭》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 监听reloadData刷新列表完毕的时机
- Laravel 给生产环境添加监听事件 - SQL日志监听
- Swift iOS : 上拉刷新或者下拉刷新
- Swift iOS : 上拉刷新或者下拉刷新
- Flutter事件监听
- 初始化监听端口
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。