在使用beforeRouteLeave时要注意两点：

 1. next(false)阻止路由继续进行,若不先阻止，会多次执行守卫中的代码

 2. 利用setTimeout延时触发弹窗，避免出现闪现情况

vue-router离开当前页面提示未保存，解决在使用beforeRouteLeave弹窗多次闪现问题的更多相关文章

  1. 关于页面数据未保存改变路由（beforeunload，beforeRouteLeave）

    一下内容为笔者个人理解,如有出入还请大佬指出不胜感激 页面有数据未保存,用户离开页面分为两种 1 . 直接关闭浏览器标签 或者点击浏览器后退按钮 离开当前页面 2. 在页面内改变路由,或则刷新页面(不 ...

  2. chrome45以后的版本安装lodop后，仍提示未安装解决

    请先查看你chrome浏览器的版本,如果是45版本以前的版本,安装后仍提示 "未安装" 或 "请升级" 请参照本链接解决:http://blog.sina.co ...

  3. (Chrome42)Lodop总计页面提示“未安装”要么“请升级”可能的原因和解决方案

    Chrome42版本号之后,支持NP态,要手工打开,方法例如以下: 在谷歌浏览器地址栏输入: chrome://flags/#enable-npapi 然后找到"启用NPAPI"地 ...

  4. vue.js对列表进行编辑未保存随时变更

    1.不要建立在同一vm对象下 2.使用深拷贝$.extend(true, vm.model, obj); 3.开新标签页

  5. Vs Code在Vue项目中v-for指令提示错误的解决办法

    最近在做一个Vue项目,在其中用到v-for指令时,发现Vs Code报错,如下图(代码是没有任何问题的),在网上找了一下解决办法,希望能帮助到更多人. 解决方法: 打开    文件-首选项-设置 将 ...

  6. Vue实现离开页面二次确认

    在项目开发中遇到用户编辑内容后未保存推出编辑页面时需要提示用户"当前数据未保存,是否退出",实际开发中利用window.onbeforeunload方法与vue.$on方法在upd ...

  7. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  8. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  9. 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

    Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...

随机推荐

  1. ABAP关键字和ABAP词汇

    下表为ABAP的词汇概览(包括关键字): ABAP-SOURCE ABBREVIATED ABS ABSTRACT ACCEPT ACCEPTING ACCORDING ACOS ACTIVATION ...

  2. HA工作机制及namenode向QJM写数据流程

    HA工作机制 (配置HA高可用传送门:https://www.cnblogs.com/zhqin/p/11904317.html) HA:高可用(7*24小时不中断服务) 主要的HA是针对集群的mas ...

  3. python 使用函数名的字符串调用函数(4种方法)_black-heart的专栏-CSDN博客 https://blog.csdn.net/mrqingyu/article/details/84403924

    funcs = ['fetch_data_' + i for i in ( 'activities', 'banners', 'server_list')]# from operator import ...

  4. （006）每日SQL学习：关于to_char函数

    to_char函数的官方文档说明: 详细to_char请移步:https://www.cnblogs.com/reborter/archive/2008/11/28/1343195.html 需求:n ...

  5. 「笔记」AC 自动机

    目录 写在前面 定义 引入 构造 暴力 字典图优化 匹配 在线 离线 复杂度 完整代码 例题 P3796 [模板]AC 自动机(加强版) P3808 [模板]AC 自动机(简单版) 「JSOI2007 ...

  6. （八）整合 Dubbo框架 ,实现RPC服务远程调用

    整合 Dubbo框架 ,实现RPC服务远程调用 1.Dubbo框架简介 1.1 框架依赖 1.2 核心角色说明 2.SpringBoot整合Dubbo 2.1 核心依赖 2.2 项目结构说明 2.3 ...

  7. Centos 搭建Hadoop

    Centos搭建Hadoop 一.搭建Hadoop需要JDK环境,首先配置JDK 二.下载haoop 三.在Centos服务器上解压下载好的安装包 四.修改配置文件 4.1 hadoop-env.sh ...

  8. C++类基本--随笔一

    #include <iostream> using namespace std; class Teacher { public: Teacher(int m=3,int n=2) { a= ...

  9. Spring boot获取getBean

    package com.job.center.quartz.common; import org.springframework.beans.BeansException; import org.sp ...

  10. Java创建线程四种方式

    1.继承Thread类 public class MyThread extends Thread { public MyThread() { } public void run() { for(int ...