vue.router router.replace点两次返回问题及解决方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/william_jzy/article/details/85760660

三个页面a , b , c , a页面router.push跳转至b,b再router.push跳转至c,c使用$router.replace("b")回到b,然后点击b页面的返回键,需要点击两次才能回到a页面。
通过进一步的观察发现,第一次点击其实并不是没有反应,而是页面返回到了首次的b页面。
这就是说,在C页面使用replace替换掉的是C页面的路由,C页面之前的B页面历史记录还存在。
要c保持router.replace至b方式不变,b页面返回键点击一次正常返回a页面
解决方法:使用replace方法之后,再使用router.go(-1)方法返回一次就可以。
例:

    this.$router.replace({name:'b'})
    this.$router.go(-1)

router.push、router.replace、router.go的区别
1.this.$router.push()
描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。

2.this.$router.replace()
描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。
例:

this.$router.go(-1)  // 返回上个页面
展开阅读全文

没有更多推荐了,返回首页