在使用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. [Poi2005]Piggy Banks小猪存钱罐

    题目描述 Byteazar有 N 个小猪存钱罐. 每个存钱罐只能用钥匙打开或者砸开. Byteazar已经把每个存钱罐的钥匙放到了某些存钱罐里. Byteazar 现在想买一台汽车于是要把所有的钱都取 ...

  2. USB充电限流IC，可调到4.8A，输入 6V关闭

    随着手机充电电流的提升,和设备的多样化,USB限流芯片就随着需求的增加而越来越多,同时为了更好的保护电子设备,需要进行一路或者多路的负载进行限流. 一般说明 PW1503,PW1502是超低RDS(O ...

  3. Django orm中related_name/related_query_name区别

    related_name/related_query_name区别 class Department(models.Model): title = models.CharField(verbose_n ...

  4. uni-app 开发随笔（踩坑记录）

    这里总结一些uni-app开发时我遇到的坑 uni-app获取元素高度及屏幕高度(uni-app不可使用document) uni.getSystemInfo({ success: function( ...

  5. TCP服务器程序

    Linux下编写TCP服务器调用的函数顺序为:socket -> bind -> listen -> accept -> recv/send socket 参见:http:// ...

  6. HTTP/2与HTTP/3的新特性

    解密HTTP/2与HTTP/3的新特性 - InfoQ https://www.infoq.cn/article/kU4OkqR8vH123a8dLCCJ

  7. A1Z26 Cipher - Letter Number A=1 B=2 C=3 - Online Decoder, Translator https://www.dcode.fr/letter-number-cipher

    A1Z26 Cipher - Letter Number A=1 B=2 C=3 - Online Decoder, Translator https://www.dcode.fr/letter-nu ...

  8. tcp的3次握手4次挥手

  9. Flash 终将谢幕：微软将于年底停止对 Flash 的支持

    近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新.早在 2017 ...

  10. Python学习【第3篇】：列表魔法

    ##########################深灰魔法-list类中提供的方法###################list 类,列表list = [1,12,9,"age" ...