合并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,
}
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
合并params和query参数
场景:三级分类只有query参数,搜索框使用params参数。为了解决这个问题,文中在typeNav的index.vue和Head/index.vue分别进行了判断和处理,确保在不同的路径下合并params和query参数能正确合并并传递。 如何当点击联动框时跳转到se…...
![](https://i-blog.csdnimg.cn/direct/3e6cd846b25148a99f7521686daa0036.png)
[数据集][目标检测]工程机械车辆检测数据集VOC+YOLO格式3189张10类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):3189 标注数量(xml文件个数):3189 标注数量(txt文件个数):3189 标注…...
![](https://www.ngui.cc/images/no-images.jpg)
构建域名服务器-BIND:Linux端的安装过程及配置文件详解
文章目录 构建域名服务器工具-BINDBIND的安装BIND配置文件详解1. /etc/named.conf:2. /etc/named.rfc1912.zones:3. /var/named/named.localhost:4./etc/logrotate.d/named5./etc/named.iscdlv.key6./etc/named.root.key7./etc/rndc.conf8./e…...
![](https://www.ngui.cc/images/no-images.jpg)
linux查询目录文件基础操作
基础命令 展示所有目录 ls 长格式列出(显示文件权限、所有者、大小和最后修改时间): ls -l 忽略大小写查询 ls | grep -i name 查找特定名称的文件: find /path/to/search -name "filename" 忽略大小写查找文件&#…...
![](https://img-blog.csdnimg.cn/img_convert/172df33f04308f130598ffe12825838a.png)
搭建TestBench,收藏这几条基本框架就够了
Verilog功能模块HDL设计完成后,并不代表设计工作的结束,还需要对设计进行进一步的仿真验证。掌握验证的方法,即如何调试自己的程序非常重要。在RTL逻辑设计中,要学会根据硬件逻辑来写测试程序即写Testbench。Verilog测试平台是一个…...
![](https://www.ngui.cc/images/no-images.jpg)
怎么利用住宅代理提高数据抓取效率
在大数据时代,数据抓取已经是从互联网收集数据的关键手段,得到了广泛的应用。不论是网络营销、电商平台、或者是新闻网站,数据抓取都可以帮助企业或者是个人收集到大量的数据。但是随着反爬虫技术的不断发展,传统的爬虫方法已经不…...
![](https://www.ngui.cc/images/no-images.jpg)
c#中的ManuaResetEvent
在C#中,ManualResetEvent 是一个同步事件,用于线程间通信。它允许一个或多个等待的线程等待某个事件的发生。当事件被设置为已发生(或称为“信号”)状态时,所有等待的线程都会被释放,并且可以继续执行。 以…...
![](https://img-blog.csdnimg.cn/img_convert/fb9a896f80b6ae27ecda2c291c328c89.jpeg)
EE trade:黄金投资的利弊与要点
黄金投资作为一种相对传统的投资途径,存在着特定的优势与风险。接下来详细剖析一下黄金投资的优缺点。 1、黄金投资的优点 有效对抗通货膨胀 在通货膨胀时期,黄金往往能有出色的表现,其价值通常会上升,如此一来便能够为投资者提…...
![](https://www.ngui.cc/images/no-images.jpg)
数据仓库模型评估的标准
面试中,肯定有数仓同学被问到:数据模型如何去评估、如何优化,那今天就聊一聊这个话题。 基本概念 模型:表达的是某一个主题、某一个业务过程,赋值业务价值,最终落地还是一个建表的过程 数仓模型…...
![](https://www.ngui.cc/images/no-images.jpg)
121231
实打实大苏打...
![](https://i-blog.csdnimg.cn/direct/a332a0e71d094e8a8906ff5aba3b23c8.png)
【机器学习】逻辑回归原理(极大似然估计,逻辑函数Sigmod函数模型详解!!!)
目录 🍔 逻辑回归应用场景 🍔 极大似然估计 2.1 为什么要有极大似然估计? 2.2 极大似然估计步骤 2.3 极大似然估计的例子 🍔 Sigmod函数模型 3.1 逻辑斯特函数的由来 3.2 Sigmod函数绘图 3.3 进一步探究-加入线性回归 3…...
![](https://img-blog.csdnimg.cn/img_convert/e3cff13d8517c7cece55b68a47268ed0.png)
网络热门编程项目导学:黑马点评
本文作者:程序员鱼皮 免费编程学习 - 编程导航网:https://www.code-nav.cn 大家好,我是鱼皮。 之前已经给大家分享了三个全栈项目,比如瑞吉外卖什么的,这几个项目都是侧重于带大家学习框架的运用、以及一些简单的业务…...
![](https://img-blog.csdnimg.cn/direct/df413fc3bbea46f7962bc7fe31fa6a01.png)
如何在本地和远程删除 Git 分支?
如何在本地和远程删除 Git 分支? 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身,就职于医疗科技公司,热衷分享知识,武汉城市开发者社区主理人 擅长.n…...
![](https://i-blog.csdnimg.cn/direct/183061df4a374b6583872ccec4d5b255.png)
08 STM32 DMA
DMA 协助CPU,完成数据转运工作。 两个程序: DMA数据转运,DMAAD多通道 DMA数据转运,将使用DMA,进行存储器到存储器的数据转运,也就是把一个数组里面的数据,复制到另一个数组里。 定义一个数组D…...
![](https://www.ngui.cc/images/no-images.jpg)
LLM之基于llama-index部署本地embedding与GLM-4模型并初步搭建RAG(其他大模型也可,附上ollma方式运行)
前言 日常没空,留着以后写 llama-index简介 官网:https://docs.llamaindex.ai/en/stable/ 简介也没空,以后再写 注:先说明,随着官方的变动,代码也可能变动,大家运行不起来,可以进…...
![](https://www.ngui.cc/images/no-images.jpg)
Python 异步爬虫:高效数据抓取的现代武器
标题:“Python 异步爬虫:高效数据抓取的现代武器” 在当今信息爆炸的时代,网络爬虫已成为数据采集的重要工具。然而,传统的同步爬虫在处理大规模数据时往往效率低下。本文将深入探讨如何使用 Python 实现异步爬虫,以提…...
![](https://i-blog.csdnimg.cn/direct/5db9c77cef084d299c7f98595b94d508.png)
【数据结构算法经典题目刨析(c语言)】使用数组实现循环队列(图文详解)
💓 博客主页:C-SDN花园GGbond ⏩ 文章专栏:数据结构经典题目刨析(c语言) 目录 一.题目描述 二.解题思路 1.循环队列的结构定义 2.队列初始化 3.判空 4.判满 5.入队列 6.出队列 7.取队首元素 8.取队尾元素 三.完整代码实…...
![](https://www.ngui.cc/images/no-images.jpg)
PTA L1-005 考试座位号
L1-005 考试座位号(15分) 每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位。正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生…...
![](https://i-blog.csdnimg.cn/direct/13f9a6cfe835408099c47bc191f472c5.png)
软件测试3333
禅道? 学习正则表达式 目标: 能说出软件测试缺陷判定标准 能说出项目中缺陷的管理系统 能使用Excel对于缺陷进行管理 能使用工具管理缺陷 一、用例执行 说明:用例执行不通过,执行结果与用例的期望结果不一致(含义&…...
![](https://www.ngui.cc/images/no-images.jpg)
JJJ:结构体定义中常加的后缀:attribute ((packed))
__attribute__ ((packed)): 的作用就是告诉编译器取消结构体在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法。这个功能是跟操作系统没关系,跟编译器有关 在GCC下:struct my{ char ch; int a;} sizeof(int)4…...
![](https://www.ngui.cc/images/no-images.jpg)
【HTML】DOCTYPE作用
<!DOCTYPE html> DOCTYPE是document type(文档类型)的缩写。是HTML5中一种标准通用标记语言的文档类型声明,告诉浏览器文档的类型,便于解析文档。不同渲染模式会影响浏览器对CSS代码甚至JS脚本的解析。它必须声明在第一行。…...
![](https://i-blog.csdnimg.cn/direct/889adc99670a41a085293a2fc3bbee8b.png)
STM32学习记录-04-EXTI外部中断
1 中断系统 (1)中断:在主程序运行过程中,出现了特定的中断触发条件(中断源),使得CPU暂停当前正在运行的程序,转而去处理中断程序,处理完成后又返回原来被暂停的位置继续…...
![](https://i-blog.csdnimg.cn/direct/d8a09882d0d444eaa8cfa506b9499c54.png)
Android Studio 动态表格显示效果
最终效果 一、先定义明细的样式 table_row.xml <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_h…...
![](https://www.ngui.cc/images/no-images.jpg)
Python 全栈系列264 使用kafka进行并发处理
说明 暂时考虑的场景是单条数据处理特别复杂和耗时的场景。 场景如下: 要对一篇文档进行实体处理,然后再对实体进行匹配。在这个过程当中,涉及到了好几部分服务: 1 实体识别服务2 数据库查询服务3 es查询服务 整个处理包成了服…...
![](https://i-blog.csdnimg.cn/blog_migrate/44696b9fc71021ca6d125801eee82179.gif#pic_center)
【安全靶场】-DC-7
❤️博客主页: iknow181 🔥系列专栏: 网络安全、 Python、JavaSE、JavaWeb、CCNP 🎉欢迎大家点赞👍收藏⭐评论✍ 一、收集信息 1.查看主机是否存活 nmap -T4 -sP 192.168.216.149 2.主动扫描 看开放了哪些端口和功能 n…...
![](https://www.ngui.cc/images/no-images.jpg)
0065__windows开发要看的经典书籍
windows开发要看的经典书籍_window编程书籍推荐-CSDN博客...
![](https://i-blog.csdnimg.cn/direct/350638ed281a457fbd738f420958e30b.png)
第133天:内网安全-横向移动域控提权NetLogonADCSPACKDC永恒之蓝
案例一:横向移动-系统漏洞-CVE-2017-0146 这个漏洞就是大家熟悉的ms17-010,这里主要学习cs发送到msf,并且msf正向连接后续 原因是cs只能支持漏洞检测,而msf上有很多exp可以利用 注意msf不能使用4.5版本的有bug 这里还是反弹权…...
![](https://img-blog.csdnimg.cn/img_convert/95e87dfd3a0cfd980aa3dde5ebf0e5a8.gif)
【IoTDB 线上小课 06】列式写入=时序数据写入性能“利器”?
【IoTDB 视频小课】更新来啦!今天已经是第六期了~ 关于 IoTDB,关于物联网,关于时序数据库,关于开源... 一个问题重点,3-5 分钟,我们讲给你听: 列式写入到底是? 上一期我们详细了解了…...
![](https://img-blog.csdnimg.cn/direct/7f06907c3c4b4c2a8800bace1e511bb8.gif#pic_center)
【机器学习】小样本学习的实战技巧:如何在数据稀缺中取得突破
我的主页:2的n次方_ 在机器学习领域,充足的标注数据通常是构建高性能模型的基础。然而,在许多实际应用中,数据稀缺的问题普遍存在,如医疗影像分析、药物研发、少见语言处理等领域。小样本学习(Few-Shot Le…...
![](https://www.ngui.cc/images/no-images.jpg)
2024.08.14 校招 实习 内推 面经
地/球🌍 : neituijunsir 交* 流*裙 ,内推/实习/校招汇总表格 1、校招 | 理想汽车2025“理想”技术沙龙开启报名 校招 | 理想汽车2025“理想”技术沙龙开启报名 2、校招 | 紫光国芯2025校园招聘正式启动 校招 | 紫光国芯2025校园招聘正式…...
![](/images/no-images.jpg)
校园微网站建设方案ppt模板/百度品牌推广
Myeclipse中其实不止tomcat支持的jre和项目工程编译环境jre版本不一致这一种原因会导致异常:Bad version in .class file;数据库链接也会报这种异常,很奇怪,不知道的话就被引入歧途了。转载于:https://blog.51cto.com/3596022/122…...
![](/images/no-images.jpg)
管理公司网站的职位/怎样进入12345的公众号
cordova应用程序Now we will learn about the various tools which we will require for App development. We have to download 5 different tools: 现在,我们将了解开发App所需的各种工具。 我们必须下载5种不同的工具: NodeJS 节点JS Cordova CLI 科…...
![](https://img-blog.csdnimg.cn/img_convert/780f9f5606a58b0946ed5e3c29e6d9a1.png)
网站建设公司哪家好 地址磐石网络/上海好的seo公司
Yield Guild Games (YGG) 通过与 Solana 上的 free-to-play & move-to-earn 游戏 Walken 合作,扩展到 X-to-earn 类型的游戏。Walken 将步行和跑步等简单的日常活动游戏化,提倡健康的生活方式,奖励玩家体能活动,同时允许他们在…...
![](/images/no-images.jpg)
重庆智能网站建设推荐/关键词优化策略
自己老师布置的一个题目:在100W个100维的向量中,取出与给定的100维的向量,欧几里得距离最小的前K个向量。我把这个问题分为了2部分,一个是计算部分,一个是统计部分。统计部分用到了索引堆,很好用࿰…...
![](https://img-blog.csdnimg.cn/20200506203619686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAyMDgzOQ==,size_16,color_FFFFFF,t_70)
茶山东莞网站建设/网站推广的10种方法
咸鱼Maya笔记—创建NURBS基本体NURBS概述创建NURBS基本体参数说明NURBS建模技术是一种非常优秀的建模方式。Maya作为一款高级三维软件,支持用户采用NURBS建模方式进行模型的创建。与传统的多边形网格建模方式相比,NURBS建模方式可以更好地控制模型表面的…...
![](https://www.oschina.net/img/hot3.png)
网页设计就业/企业关键词优化公司
2019独角兽企业重金招聘Python工程师标准>>> 基本思路:通过一个队列保存最近10次的登录记录,下一次登录请求来时,通过与队列中的第一条进行比较,如果在1分钟之内则拒绝请求,否则移除队首元素,将…...