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效率调优经验
Jun 04 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
关于svn冲突的解决方法
2013/06/21 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
小程序实现投票进度条
2019/11/20 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
基于python内置函数与匿名函数详解
2018/01/09 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
database面试题
2013/03/28 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
跟单文员岗位职责
2014/01/03 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
商场促销活动策划方案
2014/08/18 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis