@[toc]

18.合并params和query参数（Header组件+TypeNav组件）

目前代码的传参场景是：Header组件的搜索按钮按照params传参，而TypeNav组件的三级联动菜单采用query传参，合并参数的意义在于，无论是搜索按钮还是三级菜单联动都应该既包含query参数也包含params参数。

当下错误效果图如下，三级菜单跳转搜索后三级菜单的query参数没了，而搜索之后再跳转菜单时搜索的parms参数没了：

修改代码如下：

Header组件中

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

TypeNav组件中

//判断：如果路由跳转的时候，带有params参数，捎带脚传递过去
if (this.$route.params) {
    location.params = this.$route.params;
}

正确的效果图如下：

本人其他相关文章链接

1.vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】
2.vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】
3.vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
4.vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
5.vue尚品汇商城项目-day03【22.开发Floor组件】