当前位置: 首页 > news >正文

合并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,
}
http://www.lryc.cn/news/429804.html

相关文章:

  • [数据集][目标检测]工程机械车辆检测数据集VOC+YOLO格式3189张10类别
  • 构建域名服务器-BIND:Linux端的安装过程及配置文件详解
  • linux查询目录文件基础操作
  • 搭建TestBench,收藏这几条基本框架就够了
  • 怎么利用住宅代理提高数据抓取效率
  • c#中的ManuaResetEvent
  • EE trade:黄金投资的利弊与要点
  • 数据仓库模型评估的标准
  • 121231
  • 【机器学习】逻辑回归原理(极大似然估计,逻辑函数Sigmod函数模型详解!!!)
  • 网络热门编程项目导学:黑马点评
  • 如何在本地和远程删除 Git 分支?
  • 08 STM32 DMA
  • LLM之基于llama-index部署本地embedding与GLM-4模型并初步搭建RAG(其他大模型也可,附上ollma方式运行)
  • Python 异步爬虫:高效数据抓取的现代武器
  • 【数据结构算法经典题目刨析(c语言)】使用数组实现循环队列(图文详解)
  • PTA L1-005 考试座位号
  • 软件测试3333
  • JJJ:结构体定义中常加的后缀:attribute ((packed))
  • 【HTML】DOCTYPE作用
  • STM32学习记录-04-EXTI外部中断
  • Android Studio 动态表格显示效果
  • Python 全栈系列264 使用kafka进行并发处理
  • 【安全靶场】-DC-7
  • 0065__windows开发要看的经典书籍
  • 第133天:内网安全-横向移动域控提权NetLogonADCSPACKDC永恒之蓝
  • 【IoTDB 线上小课 06】列式写入=时序数据写入性能“利器”?
  • 【机器学习】小样本学习的实战技巧:如何在数据稀缺中取得突破
  • 2024.08.14 校招 实习 内推 面经
  • 国产双通道集成电机一体化应用的电机驱动芯片-SS6951A