美文网首页
21.记录Vue项目router中replace需要返回两次问题

21.记录Vue项目router中replace需要返回两次问题

作者: 饿了么配送员 | 来源:发表于2021-03-13 14:14 被阅读0次

需求:通过A页面跳转B页面,B页面跳出C页面,C页面跳转B页面,A-B-C-B
使用 $router.replace C跳转B 这个方法不会向history里面添加新的记录,A-B-B

this.$router.replace(name:'B');

这样就会出现 B返回A 的时候出现需要点击两次返回才能跳转到A,B-B-A
所以在 B返回A 的时候使用router.go(-1)方法返回一次就可以解决, B-A

this.$router.go(-1);

实际:在B页面监听路由跳转是否存在参数,然后刷新数据

// A页面
this.$router.push(name:'B');
// B页面
this.$router.push(name:'C');
watch: {
        // 监听 修改 查看后返回查看页面时候,自动router的历史减一页
        $route:{
            handler(val) {
                if(val.params.freshen){
                    this.loadData();
                    this.$router.go(-1);
                }
            },
            immediate: true
        }
},
// C页面
this.$router.replace({
        name: 'B',
        params:{
          freshen: "true"
        }
})

相关文章

网友评论

      本文标题:21.记录Vue项目router中replace需要返回两次问题

      本文链接:https://www.haomeiwen.com/subject/ktsxcltx.html