vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】

忘是亡心i 2024-03-24 12:46 24阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  18.合并params和query参数（Header组件+TypeNav组件）
 *  本人其他相关文章链接

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

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

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

![在这里插入图片描述][d6af4a0794f142f1ac23efc694293a68.gif_pic_center]

修改代码如下：

`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;
    }

> 正确的效果图如下：

![在这里插入图片描述][288d23d4521f4713a24569186cb95649.gif_pic_center]

## 本人其他相关文章链接 ##

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

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c04115dc74a04fb89de8467ae7e67011.png
[d6af4a0794f142f1ac23efc694293a68.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/525ecb57bf8a4432a651a6108f78a39b.png
[288d23d4521f4713a24569186cb95649.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2ba49c3339c3481b8e2a8d5235108f73.png
[vue_-day03_16._Search_TypeNav_17.]: https://blog.csdn.net/a924382407/article/details/129893325
[vue_-day03_18._params_query_Header_TypeNav]: https://blog.csdn.net/a924382407/article/details/129893392
[vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]: https://blog.csdn.net/a924382407/article/details/129893467
[vue_-day03_20._Banner_21._swiper]: https://blog.csdn.net/a924382407/article/details/129893511
[vue_-day03_22._Floor]: https://blog.csdn.net/a924382407/article/details/129893541