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 19 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python实现朴素贝叶斯算法
2018/11/19 Python
python安装requests库的实例代码
2019/06/25 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
会计专业的自荐信
2013/12/12 职场文书
求职信范文怎么写
2014/01/29 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
红色经典观后感
2015/06/18 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android