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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php下获取http状态的实现代码
2014/05/09 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Python生成随机数的方法
2014/01/14 Python
Python实现多行注释的另类方法
2014/08/22 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python中requests小技巧
2017/05/10 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
酒店总经理工作职责
2013/12/13 职场文书
医药营销个人求职信
2014/04/12 职场文书
大专护理专业自荐信
2015/03/25 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android