问题所在:
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)
以上两种方案,推荐使用方案一