合并params和query参数

场景:三级分类只有query参数,搜索框使用params参数。为了解决这个问题,文中在typeNav的index.vue和Head/index.vue分别进行了判断和处理,确保在不同的路径下合并params和query参数能正确合并并传递。

如何当点击联动框时跳转到search路由,同时带着点击组件搜到的query参数,然后在搜索框中搜索词条,词条转为params参数也要带着,即现在$route中既要有query参数又要有params参数。

在Header组件中
源代码:

 this.$router.push({
        name: 'search',
        params: { keyword: this.keyword || undefined },
      })

route中本来就有query属性时保留这个query属性,当route中本来就有params属性保留这个params属性。
修改之后:

  let location = {
    name: 'search',
    params: { keyword: this.keyword || undefined },
  }
  if (this.$route.query) {
    location.query = this.$route.query
  }
  this.$router.push(location);

在TypeNav中
源代码:

   let location = { name: "search" };
   let query = { categoryName: categoryname };
   location.query = query;
   this.$router.push(location);

修改之后:

	let location = { name: "search" };
    let query = { categoryName: categoryname };
    // 判断:如果由跳转的时候如果由params参数,也进行传递
	if(this.$route.params){
       location.params = this.$route.params
    }
    // 合并路径和参数
    location.query = query;
    // 路由跳转
    this.$router.push(location);

当带着params属性点击联动框可以保留这个params属性,但带着query属性进行搜索时反而收不到的params属性。
应该在router文件中search的位置添加上params传参的占位符。

name: 'search',
path: '/search:keyword',  // 占位符
component: Search,
meta:{
    isFooterShow:true,
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

简 。单

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值