关于路由参数不断的切换导致返回历史无法一次返回到"上一个路由"的问题

最新推荐文章于 2022-03-11 15:05:05 发布

原创最新推荐文章于 2022-03-11 15:05:05 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

vue笔记专栏收录该内容

35 篇文章

订阅专栏

博客介绍了路由带参页面返回的处理方法。对于个人中心到订单页的固定模式，可将浏览器最后一次历史改为个人中心，或用路由跳转；对于商品列表页，因进入途径多样，需判断记录进入时的路由并存储，还提到在 app.vue 中监听路由。

1 比如第一种需求，个人中心进入订单页，由于我需要带参数到订单页时处理不同的状态，所以我这里用路由带参数，返回时我应该直接返回个人中心，而不是按照浏览器的历史一直后台，解决：

watch:{
  '$route':function(){
    history.pushState(null,null,'/#/account');
  },
},

解决方法就是订单列表中每次路由的改变我们都要将浏览器的最后一次历史改为''个人中心''，这样浏览器历史返回上一页就是个人中心了，当然这种个人中心到订单的模式是固定的，所以当返回按钮用自己的元素的时候，其实可以直接用路由跳转到个人中心。

2 我有一个商品列表页，头部带分类的那种，我跳过来的时候路由也是带参数的，但是我进这个列表页的途径是多种，那个我返回的时候就不能是固定的了，这种的话就要求判断记录进入这个列表页的时候的路由，存一下；

在app.vue中监听路由：

watch:{
  '$route':function(newUrl,oldUrl){

    if(newUrl.name==='GoodsList'&&oldUrl.name!='GoodsList'){
     this.$store.dispatch('setState',{name:'RecordGoodsList',value:{
     lastHash:oldUrl.fullPath,
     }});
    }

  }
}

然后列表页：

 watch:{
      '$route':function(){
        history.replaceState(null,null,'/#'+this.$store.state.RecordGoodsList.lastHash);
       ...
      }
    },