先看效果图:

1.刷新页面效果:

2.跳转路由(进入别的页面前)效果:

代码:
   // 路由跳转确认
beforeRouteLeave(to, from, next) {
const answer = window.confirm("当前页面数据未保存,确定要离开?");
if (answer) {
next();
} else {
next(false);
}
},
// 浏览器刷新确认 把下面 '/test' 换成需要确认操作效果的页面路径,可以通过注释window.onbeforeunload函数后在控制台查看console
mounted() {
var _this=this;
console.log(_this.$route.fullPath)
window.onbeforeunload = function(e) {
if (_this.$route.fullPath == '/test') {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = "关闭提示";
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return "关闭提示";
} else {
window.onbeforeunload = null;
}
};
}

vue 路由跳转前确认框,刷新浏览器页面前提示确认框的更多相关文章

  1. vue路由跳转的方式

    vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...

  2. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  3. vue路由跳转报错解决

    vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...

  4. 去除vue路由跳转地址栏后的哈希值#

    去除vue路由跳转地址栏后的哈希值#,我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# mode:"history" import ...

  5. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  6. vue路由跳转取消上个页面的请求和去掉重复请求

    vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求

  7. vue路由跳转时判断用户是否登录功能

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...

  8. Vue路由跳转时显示空白页面,iview的使用

    最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始 ...

  9. 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

    https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...

随机推荐

  1. C#创建日志方法

    1.通过流的方式 public void WriteLog(string log) { StreamWriter stream; string path = "D:/WriteLog/&qu ...

  2. 为何需要apigee edge

    http://apigee.com/docs/gateway-services/content/what-apigee-edge 越来越多的服务商在网上提供服务,通过各种标准的接口对来自手机.电脑.p ...

  3. navicat for mysql 在Mac上安装后没有连接列表,就是左边的那一列连接项目怎么办?

    在连接数处打对勾就可以了

  4. 2019-10-21-WPF-多个-StylusPlugIn-的事件触发顺序

    title author date CreateTime categories WPF 多个 StylusPlugIn 的事件触发顺序 lindexi 2019-10-21 08:33:15 +080 ...

  5. HZOJ Permutation

    输出原序列有45分…… 字典序最小可以和拓扑序联系起来. 根据原来的题意不是很可做,于是对原序列求逆,令q[p[i]]=i; 那么就成功将题意转化:相邻元素值的差大于等于k时可以交换,使序列字典序最小 ...

  6. 18.libgdx制作预览图,背景移动循环,改变地图颜色

    经过构思,游戏将分为两部分, 1,预览图,只负责展示世界形势 2,根据预览图生成的战役项 现在要记录的是我制作预览图的部分 1.预览图只有实际地图的1/4,首先生成地图(建议不要缩放以前地图,由于误差 ...

  7. Spring security获取当前用户

    1.如果在jsp页面中获取可以使用spring security的标签 页面引入标签 <%@ taglib prefix="sec" uri="http://www ...

  8. 荣获“5G MEC优秀商用案例奖”,阿里云边缘计算发力新零售

    4月24日,在中国联通合作伙伴大会的 “5G MEC(Mobile Edge Computing,移动边缘计算)边缘云赋能行业数字化转型”分论坛上,阿里云“基于5G边缘计算的新零售应用案例”荣获201 ...

  9. Flask——向博客文章中添加图片

    未添加图片样式 添加图片设置: 1.允许渲染img标签 在数据库文章模型allowed_tags中添加img 2.给clean函数加个参数attributes=attrs, attrs = { '*' ...

  10. jq 监听返回事件

    <script> $(document).ready(function(e) {             var counter = 0;            if (window.hi ...