先看效果图:

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. SSM+Maven+IDEA增删改查

    开发工具 IntelliJ IDEA Apache-tomcat-9.0 JDK 1.8 MySQL 8.0.11 Maven 3.5.4 IDEA+Maven搭建项目骨架 1. 新建Maven项目: ...

  2. Hibernate→ 《Hibernate程序开发》教材大纲

    Hibernate ORM 概览 Hibernate 简介 Hibernate 架构 Hibernate 环境 Hibernate 配置 Hibernate 会话 Hibernate 持久化类 Hib ...

  3. 高速求幂 POW优化

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013497151/article/details/27633731 #include <io ...

  4. pl/sql基础知识—函数快速入门

    n  函数 函数用于返回特定的数据,当建立函数式,在函数头部必须包含return子句,而在函数体内必须包含return语句返回的数据,我们可以使用create function来建立函数,实际案例: ...

  5. C - League of Leesins-构造

    题意就是给多个三元组(内部没有顺序),让你构造一个序列,使得所有的三元组都是存在的 简单的思考后就会发现一个简单的思路,开头的数一定只出现一次,进而可以找到头或者尾部的第一个三元组,然后我们知道序列最 ...

  6. python 嵌套列表

  7. python 检测目录

    #!/usr/bin/env python# -*- coding:utf-8 -*-import osimport win32fileimport win32con ACTIONS = { 1 : ...

  8. @codechef - RNG@ Random Number Generator

    目录 @description@ @solution@ @part - 1@ @part - 2@ @part - 3@ @accepted code@ @details@ @description@ ...

  9. 屏蔽指定地区IP访问

    <?php if ($HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"]) { $ip = $HTTP_SERVER_VARS["HT ...

  10. H3C Telnet配置例子