先看效果图:

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. 数据库lib7第4题创建存储过程

    1. 传入2个字符串变量,其中,每个字符串是用分号(:)分隔的字串形式, 比如str1=’ab12;ab;cccc;tty’, str2=’1;6sf;8fffff;dd’, 注意,字符串是用户输入的 ...

  2. java memory allocation(转)

    Java的运行时数据存储机制 Java程序在运行时需要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存储?这些数据结构有什么特点?本文试图说明此命题的皮毛之皮毛. 概念   对 ...

  3. JavaScript中的this关键字的几种用法

    JS 里的 this 在 function 内部被创建 指向调用时所在函数所绑定的对象(拗口) this 不能被赋值,但可以被 call/apply 改变 1. this 和构造函数 function ...

  4. Leetcode788.Rotated Digits旋转数字

    我们称一个数 X 为好数, 如果它的每位数字逐个地被旋转 180 度后,我们仍可以得到一个有效的,且和 X 不同的数.要求每位数字都要被旋转. 如果一个数的每位数字被旋转以后仍然还是一个数字, 则这个 ...

  5. 【风马一族_php】常用的语句

    设置脚本的编码 <?php header('Content-type:text/html;charset=utf-8');  ?> 按原格式的输入内容 echo <pre>; ...

  6. 阿里云容器Kubernetes监控(九) - Kubernetes事件离线工具kube-eventer正式开源

    前言 监控是保障系统稳定性的重要组成部分,在Kubernetes开源生态中,资源类的监控工具与组件百花齐放.除了社区自己孵化的metrics-server,还有从CNCF毕业的Prometheus等等 ...

  7. hdu5437 优先队列 长春网赛

    优先队列做,然后遍历人数. #include <queue> #include <stdio.h> #include <string.h> #define maxn ...

  8. spider csdn blog part II

    继续上次的笔记, 继续完善csdn博文的提取. 发现了非常好的模块. html2docx 结果展示: 运行之后, 直接生成docx文档. 截个图如下: 结果已经基本满意了!!! 在编写过程中的一些感想 ...

  9. React Native自定义导航栏

    之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...

  10. Android依赖别的包时,出现的问题

    项目和依赖的项目一定要在同一个文件夹下,不然会出现这种问题