Vue+vant 直播间 - 在离开直播间时弹出确认框

我爱软件狗

于 2022-08-05 14:24:33 发布

阅读量356

点赞数

分类专栏：问题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43525759/article/details/126176866

版权

问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue应用中使用beforeRouteLeave生命周期钩子函数来实现页面离开时的确认弹窗。当用户尝试离开页面时，会触发该钩子，通过Dialog组件显示确认提示。问题在于只有首次进入时弹窗正常显示，之后只会显示蒙罩层。为了解决这个问题，作者采用了setTimeout延时处理，但未深入解释其原因。最终，通过设置延迟时间，成功解决了弹窗只显示一次的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现：

由于页面导航自带返回按钮，利用Vue周期钩子函数 beforeRouteLeave (to, from, next) {}

beforeRouteLeave 的三个参数分别是
1、to：要去的页面
2、from：本页面地址
3：next 下一步

next（false）代表不进行操作。

问题：

只有第一次进入页面时，弹框才会弹出来，再次进入页面只出现蒙罩层，且只是一闪而过。

解决：

加一个计时器 setTimeout(（）=>{}），网上搜罗来的，目前还不知为什么，知道了会补充。

	beforeRouteLeave (to, from, next) {
       //  1 操作来自关闭按钮（按钮点击flag）
   		console.log("我退出了")
		setTimeout(() => {
			Dialog.confirm({
					title: '确认',
					message: '确认离开直播间？',
				})
				.then(() => {
					console.log(from.path ,from)
					if(from.path === '/startLive'){
						next();
						this.quitGroup()
						console.log("确认")
					}
				})
				.catch(() => {
					// on cancel
				console.log("取消")

					next(false)
				});
				},200)
		},