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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
js实现滑动进度条效果
Aug 21 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
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
python 常用的基础函数
2018/07/10 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python网络编程之五子棋游戏
2020/05/14 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
临床医师专业个人自我评价
2014/01/08 职场文书
奥巴马演讲稿
2014/01/08 职场文书
安全责任书范本
2014/04/15 职场文书
班长竞选演讲稿
2014/04/24 职场文书
2015年组织部工作总结
2015/04/03 职场文书
海底两万里读书笔记
2015/06/26 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
golang操作rocketmq的示例代码
2022/04/06 Golang
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js