vue 路由跳转前确认框,刷新浏览器页面前提示确认框
先看效果图:
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 路由跳转前确认框,刷新浏览器页面前提示确认框的更多相关文章
- vue路由跳转的方式
vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
- 去除vue路由跳转地址栏后的哈希值#
去除vue路由跳转地址栏后的哈希值#,我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# mode:"history" import ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- vue路由跳转取消上个页面的请求和去掉重复请求
vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求
- vue路由跳转时判断用户是否登录功能
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...
- Vue路由跳转时显示空白页面,iview的使用
最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始 ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
随机推荐
- java reference(转)
http://blog.163.com/xubin_3@126/blog/static/112987702200962211145825/ 在Java中的引用类型,是指除了基本的变量类型之外的所有类型 ...
- 【数论】不定方程&逆元&中国剩余定理
一.不定方程 要求逆元,首先要知道什么是不定方程. 已知a,b,c,求解x,y,形如ax + by = c 的方程就是不定方程. 不定方程有两种解的情况: 1.无解 2.存在且有无限的解 那么,如何判 ...
- BZOJ3832Rally题解
一道思维神题.... 我们像网络流一样加入原点S,与汇点T 用f[i]表示原点到i的最长路,用g[i]表示i到汇点的最长路 f数组与g数组都可以dp求出来的 接下来考虑如何通过这些信息来维护删除某个点 ...
- 阿里云容器Kubernetes监控(九) - Kubernetes事件离线工具kube-eventer正式开源
前言 监控是保障系统稳定性的重要组成部分,在Kubernetes开源生态中,资源类的监控工具与组件百花齐放.除了社区自己孵化的metrics-server,还有从CNCF毕业的Prometheus等等 ...
- 基于Tablestore Tunnel的数据复制实战
前言 数据复制主要指通过互联的网络在多台机器上保存相同数据的副本,通过数据复制方案,人们通常希望达到以下目的:1)使数据在地理位置上更接近用户,进而降低访问延迟:2)当部分组件出现故障时,系统依旧可以 ...
- 记忆化搜索(DFS)--How many ways
How many ways 这是一个简单的生存游戏,你控制一个机器人从一个棋盘的起始点(1,1)走到棋盘的终点(n,m).游戏的规则描述如下:1.机器人一开始在棋盘的起始点并有起始点所标有的能量.2. ...
- Kubernetes排错:用容器的元数据提供新思路
在这篇文章中,让我们讨论一下Kubernetes中的元数据(Metadata),以及如何利用它来监控系统的性能. 元数据(Metadata) 是一个较为高大上的词.它的含义是"用来描述其他数 ...
- spring data jpa 原生sql 别名字段无法注入
开发四年只会写业务代码,分布式高并发都不会还做程序员?->>> 在使用entityManager.createNativeQuery(sql,User.class)这个方法时, ...
- Hadoop应用程序示例
- @codechef - BIKE@ Chef and Bike
目录 @description@ @solution@ @accepted code@ @details@ @description@ 输入 n(n ≤ 22) 个点,m(m ≤ 8000) 个边.每 ...