Vue监听页面刷新和关闭功能


Posted in Javascript onJune 20, 2019

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

将提交的一步操作放到 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监听页面刷新和关闭功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 #Javascript
js实现页面多个日期时间倒计时效果
Jun 20 #Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 #Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 #Javascript
JS实现的简单tab切换功能完整示例
Jun 20 #Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 #Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
You might like
Terran兵种对照表
2020/03/14 星际争霸
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
js实现全选和全不选
2020/07/28 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
什么是servlet
2012/05/08 面试题
4s店机修工岗位职责
2013/12/20 职场文书
公司离职证明范本
2014/01/13 职场文书
三下乡活动方案
2014/01/31 职场文书
工作检讨书500字
2014/10/19 职场文书
情人节单身感言
2015/08/03 职场文书
安全教育培训心得体会
2016/01/15 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS