VUE 拦截浏览器后退弹窗，弹窗一闪立刻消失问题

产品需求，离开当前页面需要进行拦截，弹窗确认以后才离开。

笔者采用了在beforeRouteLeave里面进行拦截的方案。但是发现点击浏览器的后退按钮，会出现弹窗闪现一下，立刻消失，页面路由改变了，页面确没有变化。

解决方案

增加一个setTimeout延时

if (from.name === 'index') {setTimeout(() => {this.$confirm('您的信息尚未保存，是否确认操作', {closeOnClickModal: false,lockScroll: false}).then(async() => {next()}).catch((e) => {console.log(e)next(false)})}, 200)
} else {next()
}

VUE 拦截浏览器后退弹窗，弹窗一闪立刻消失问题相关推荐

Vue 点浏览器后退模态框有灰色遮罩，监听返回键 this 无效
问题:前端使用 <el-dialog 实现模态框当打开模态框后,点击浏览器上的后退按钮,发现遮罩还在. 解决办法监听返回键,遇到的问题是直接用 this.xxx 无效,原因是此处 this 非 ...
积米浏览器如何阻止弹窗
日常使用浏览器的时候,最烦人也最经常出现的情况也就是各种各样的弹窗广告了,就算当下立即点击关闭,但是不用多久弹窗还是会继续出现.其实,这样的情况点击关闭是没有用的,需要从浏览器设置里关闭.那么,积米浏 ...
Vue中浏览器的的前进和后退
项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在vue中浏览器的前进和后退一.后退功能 vue中的后退有好多种方法可以使用,使用这些方 ...
html防止恶意广告,如何拦截恶意网页和弹窗广告？解决方法
我们平常在使用电脑上网的时候,电脑右下角经常会跳出广告,每次都要点击关闭,有时候点击关闭,还会出现跳转到那个广告页面的情况.不言而喻,这种情况已经影响了我们的上网体验,那这种情况究竟是什么原因呢?如何 ...
vue怎样引入使用layer弹窗以及icon使用
vue怎样引入使用layer弹窗以及icon使用功能需求功能实现 1.在vue中引入layui-layer 2.引入jquery 3.在main.js中引入layui-layer 4.使用laye ...
vue中使用，js禁用浏览器后退按钮
* js禁用浏览器后退按钮 * vue中使用*/ methods:{goBack(){history.pushState(null,null,document.URL);}, } destroyed( ...
.NET中间件以及VUE拦截器联合使用
.NET中间件以及VUE拦截器联合使用工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑特性 //特性public class ModelEsi ...
Vue 拦截器原理和详细使用
拦截器原理和作用首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
OAF中下载附件之后页面失效，报过时的数据异常，浏览器后退异常
我在使用了下载功能之后,再往页面添加行或进行保存,页面老是报浏览器后退的异常. 猜测是因为我的下载按钮使用的submitButton,它隐式的包含了一个submit动作,且我在代码中有一个Commit ...

VUE 拦截浏览器后退弹窗，弹窗一闪立刻消失问题

解决方案

VUE 拦截浏览器后退弹窗，弹窗一闪立刻消失问题相关推荐

最新文章

热门文章