vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】_商品汇项目是如何解决query参数丢失的问题的-CSDN博客

本文链接：https://blog.csdn.net/a924382407/article/details/129893392

文章讲述了在Vue商城项目中，Header组件的搜索功能和TypeNav组件的三级菜单联动如何分别使用params和query参数，以及如何修改代码将两者合并，确保在页面跳转时同时保留搜索参数和菜单选择参数。通过修复问题，实现了正确的参数传递，保证了功能的完整性和用户体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

文章目录

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

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

正确的效果图如下：

在这里插入图片描述

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

文章目录

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

本人其他相关文章链接