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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
js登录弹出层特效
Mar 07 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
JavaScript执行机制详细介绍
Dec 06 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
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
YII框架常用技巧总结
2019/04/27 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python递归函数定义与用法示例
2017/06/02 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python与R语言的简要对比
2017/11/14 Python
Python中GIL的使用详解
2018/10/03 Python
python 检查文件mime类型的方法
2018/12/08 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
幼儿发展评估方案
2014/06/11 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript