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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
Js组件的一些写法
Sep 10 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
JavaScript前端面试组合函数
Jun 21 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php 操作调试的方法
2012/07/12 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
Python列表计数及插入实例
2014/12/17 Python
Python的Django框架中的Context使用
2015/07/15 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
详解python tkinter 图片插入问题
2020/09/03 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
少先队入队活动方案
2014/02/08 职场文书
十八届三中全会感言
2014/03/10 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
运动会广播稿200字
2015/08/19 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis