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 setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
微信小程序组件生命周期的踩坑记录
Mar 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
用PHP实现图象锐化代码
2007/06/14 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php 魔术方法详解
2014/11/11 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
python re模块的高级用法详解
2018/06/06 Python
Python3.6简单反射操作示例
2018/06/14 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
家具商场的活动方案
2014/08/16 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server