vue如何在用户要关闭当前网页时弹出提示的实现


Posted in Javascript onMay 31, 2020

本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现,分享给大家,具体如下:

效果如下图

vue如何在用户要关闭当前网页时弹出提示的实现

正常 js 页面处理方式

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

vue 中处理方式

let _this = this
  window.onbeforeunload = function (e) {
   if (_this.$route.name == "dyyPerformanceCenterSale") {
    e = e || window.event;
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
     e.returnValue = '关闭提示1111';
    }
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '关闭提示222';
   } else {
    window.onbeforeunload = null
   }
  };

针对很多同学说的没有实现 ,我这里在详细描述一下 方法写在 mounted里面 ,然后 记得把route name替换成自己当前页面的

到此这篇关于vue如何在用户要关闭当前网页时弹出提示的实现的文章就介绍到这了,更多相关vue关闭当前网页时弹出提示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript检测页面是否缩放的小例子
May 16 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 #Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 #Javascript
公众号SVG动画交互实战代码
May 31 #Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 #Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 #Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
You might like
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
DOM事件探秘篇
2017/02/15 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
Python高并发和多线程有什么关系
2020/11/14 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
社区反邪教工作方案
2014/06/16 职场文书
世界文化遗产导游词
2015/02/13 职场文书
六五普法心得体会2016
2016/01/21 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Python实现日志实时监测的示例详解
2022/04/06 Python