vuejs中监听窗口关闭和窗口刷新事件的方法


Posted in Javascript onSeptember 21, 2018

1、使用window.onunload之类的API

window.onbeforeunload = function (e) {
 e = e || window.event;
 
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
 e.returnValue = '关闭提示';
 }
 
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '关闭提示';
};

2、在生命周期钩子中注册监听事件

methods: {
 beforeunloadHandler (e) {
 // ...
 }
}

在 mounted 钩子中注册事件

mounted() {
 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}

在 destroyed 钩子卸载事件

destroyed() {
 window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}

以上这篇vuejs中监听窗口关闭和窗口刷新事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 #Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 #Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 #Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 #Javascript
探秘vue-rx 2.0(推荐)
Sep 21 #Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 #Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python3代码中实现加法重载的实例
2020/12/03 Python
《赵州桥》教学反思
2014/02/17 职场文书
社保委托书怎么写
2014/08/02 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
城管个人总结
2015/02/28 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
话题作文之诚信
2019/11/28 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Pandas 数据编码的十种方法
2022/04/20 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
教你如何用cmd快速登录服务器
2022/06/10 Servers
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS