vue项目使用router.replace后需要返回两次的解决方案

18 篇文章 0 订阅

问题所在:
a页面 push到 b页面, b页面 push到 c页面,c页面 replace到 b页面,这时候点击按钮(router.go(-1)),没有效果,需点击两次才能返回到a页面中!

分析:
页面跳转流程: a => b => c => b
路由栈:a => b => b
就路由栈说明:a到b,b到c就无需多说,下一步的c replace到b,本意为在栈中b页面替代了c页面,所以路由栈中不存在c路由,因此在我们在点击第一次返回后,其实是从一个b页面返回到另一个b页面,所以从视觉上来看,感觉没有什么效果。这就是问题所在之处,根据这问题寻找解决方案。

方案一:

在点击使用replace的代码后面添加一条路由返回的代码

this.$router.replace('/hello')
this.$router.go(-1)

方案二
在点击后退的按钮处 添加判断,点击后还是当前页面,则再次后退

this.$router.go(-1)
setTimeout(() => {
     if (this.$route.name === 'hello') {
        this.$router.go(-1)
     }
}, 500)

以上两种方案,推荐使用方案一

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值