vue router进行路由跳转并携带参数(params/query)

news2024/11/24 20:13:15

在使用`router.push`进行路由跳转到另一个组件时,可以通过`params`或`query`来传递参数。


1. 使用`params`传参:
 

// 在路由跳转时传递参数
router.push({
name: 'targetComponent',
params: {
  paramName: paramValue  // 参数名和值
}
});

// 在目标组件中通过$route.params获取参数值
this.$route.params.paramName


2. 使用`query`传参:
 

// 在路由跳转时传递参数
router.push({
name: 'targetComponent',
query: {
  paramName: paramValue  // 参数名和值
}
});

// 在目标组件中通过$route.query获取参数值
this.$route.query.paramName


需要注意的是,`params`传参会将参数添加到URL路径中,而`query`传参则会将参数添加到URL的查询字符串中。根据具体需求选择适合的方式进行参数传递。

二者的区别:

`params`和`query`是Vue Router中用于传递参数的两种方式,它们有以下区别:
1. URL形式:
   - `params`传参:参数会以占位符的形式添加到URL路径中,例如:`/targetComponent/:paramName`
   - `query`传参:参数会以键值对的形式添加到URL的查询字符串中,例如:`/targetComponent?paramName=paramValue`
2. 参数的可见性:
   - `params`传参:参数会在URL中暴露,可以被查看和修改,适合传递敏感数据。
   - `query`传参:参数在URL中不直接暴露,不会修改URL路径,适合传递非敏感数据。
3. 参数的传递方式:
   - `params`传参:参数通过路由的`params`属性进行传递,传递的参数是一个对象。
   - `query`传参:参数通过路由的`query`属性进行传递,传递的参数是一个键值对的对象。
4. 路由配置:
   - `params`传参:需要在路由配置中定义参数的名称,以冒号开头,例如:`path: '/targetComponent/:paramName'`
   - `query`传参:不需要在路由配置中定义参数,可以直接使用。
需要根据具体的需求选择适合的方式进行参数传递。如果参数需要在URL中暴露或需要保留在浏览器的历史记录中,可以使用`params`传参;如果参数是一些临时的、非敏感的数据,可以使用`query`传参。

注意:如上方举例,如果paramValue是一个对象,跳转完页面后,如果进行页面刷新,会发现取到的值变成了[object Object]

可以在传递参数时先JSON.stringify,取值时JSON.parse解析

举例:

// 传递时
this.$router.push({
    path: "/screen/project",
    query: {
    paramName: JSON.stringify(this.paramValue)
    }
});

// 接收时
JSON.parse(this.$route.query.paramName);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/970405.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3回到顶部(BackTop)

效果如下图:在线预览 APIs 参数说明类型默认值必传bottomBackTop 距离页面底部的高度number | string40falserightBackTop 距离页面右侧的宽度number | string40falsevisibilityHeight滚动时触发显示回到顶部的高度number180falsetoBackTop 渲染的容器节点 可选 元…

05. 逻辑门和加法器等原理探究

1. 二极管 1.1 什么是二极管 二极管是一种电子元件,它的主要特点是只允许电流在一个方向通过,而另一个方向电流将被阻止。 下面是二极管的示意图: 电流往箭头指向的地方流 1.2 二极管的作用 下面第一个图:给灯泡加上正负电压,…

pcapng 文件转 pcap 文件

pcap 是早期计算机网络抓包格式,几乎所有抓包工具都支持pcap;pcapng 是下一代抓包格式,支持不同路线以寻求标准化,pcapng格式通过使用标准化块和字段来实现可扩展性需求。 在tcpreplay重放数据包的时候,手里只有pcapng文件&#…

【牛客网题目】合并k个已排序的链表

目录 描述 题目分析 描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a;节点总数 0≤n≤5000&#xff0c;每个节点的val满足∣val∣<1000 要求&#xff1a;时间复杂度 O(nlogn) 示例1 输入&#xff1a;[{1,2,3},{4,5,6,7}]返回值…

地质灾害监测方案(地质灾害监测原理与方法)

我国坡地较多,地质灾害时有发生,给人民生命财产安全和经济建设造成严重威胁。采用工业物联网技术进行地质灾害监测,可以实现对山体移动、边坡变形等地质灾害的预警和实时监测,保护人民生命财产安全。现提出如下地质灾害监测方案: 1. 监测场景:针对易发地质灾害的区域,如矿山边坡…

有效的价格管理手段

品牌产品的价格定位是非常严肃的事情&#xff0c;尤其像新品发售期间&#xff0c;价格的波动会对销量影响非常大&#xff0c;所以产品定价的稳定性关系到品牌发展&#xff0c;同时也会影响经销商的销售热情&#xff0c;所以品牌需要对价格进行管理&#xff0c;维持住价格的定价…

分支创建查看切换

1、初始化git目录&#xff0c;创建文件并将其推送到本地库 git init echo "123" > hello.txt git add hello.txt git commit -m "first commit" hello.txt$ git init Initialized empty Git repository in D:/Git/git-demo/.git/ AdministratorDESKT…

elementUI textarea可自适应文本高度的文本域

效果图; 通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整&#xff0c;并且 autosize 还可以设定为一个对象&#xff0c;指定最小行数和最大行数。 <el-inputtype"textarea"autosizeplaceholder"请输入内容"v-model"te…

书单文案素材哪里找?怎么做成视频?

在当今信息爆炸的时代&#xff0c;越来越多的人开始关注书单并希望分享自己的阅读经验。但是&#xff0c;很多人可能不知道如何寻找书单文案素材以及如何将其制作成视频。本文将为大家介绍一些寻找书单文案素材和制作书单视频的方法。 寻找书单文案素材 1.书单推荐网站 除了书…

前端如何将后台数组进行等分切割

前端如何切割数组 目标&#xff1a;前端需要做轮播&#xff0c;一屏展示12个&#xff0c;后端返回的数组需要进行切割&#xff0c;将数据以12为一组进行分割 环境&#xff1a;vue3tselement plus 代码如下&#xff1a; function divideArrayIntoEqualParts(array, chunkSiz…

输出归一化位置式PID(COTRUST完整梯形图代码)

SMART PLC单自由度和双自由度位置式PID的完整源代码,请参看下面文章链接: 位置式PID(S7-200SMART 单自由度、双自由度梯形图源代码)_RXXW_Dor的博客-CSDN博客有关位置型PID和增量型PID的更多详细介绍请参看PID专栏的相关文章,链接如下:SMART PLC增量型PID算法和梯形图代码…

pycharm 下jupyter noteobook显示黑白图片不正常

背景现象&#xff1a; 1、显示一张黑白图片&#xff0c;颜色反过来了。 from IPython.display import display source Image.open(examples/images/forest_pruned.bmp) display(source) 2、原因&#xff1a; 是pycharm会在深色皮肤下默认反转jupyter notebook输出图片的颜…

【python爬虫】13.吃什么不会胖(爬虫实操练习)

文章目录 前言项目实操明确目标分析过程代码实现 前言 吃什么不会胖——这是我前段时间在健身时比较关注的话题。 相信很多人&#xff0c;哪怕不健身&#xff0c;也会和我一样注重饮食的健康&#xff0c;在乎自己每天摄入的食物热量。 不过&#xff0c;生活中应该很少有人会…

【Docker】 08-Dockerfile

什么是Dockerfile Dockerfile可以认为是Docker镜像的描述文件&#xff0c;是由一系列命令和参数构成的教程&#xff0c;主要作用是用来构建docker镜像的构建文件。 Dockerfile解析过程 Dockerfile的保留命令 保留字作用FROM当前镜像是基于哪个镜像的 第一个指令必须是FROMMA…

做一个答题小程序需要多少钱

做一个答题小程序需要多少钱呢&#xff1f;相信这是很多想做答题小程序的小伙伴非常关心的一个问题&#xff0c;那么今天我们就来分析一下做一个影响答题小程序价格的主要功能因素。 答题小程序开发成本的高低很大一部分是由具体的功能需求决定的&#xff0c;比如个人答题模式…

rk3399 linux 5.10 usb 2.0设备上电概率性注册失败

多次开关机&#xff0c;发现usb hub和4G都通信失败了&#xff0c;这就有点奇怪了&#xff0c;按理说usb驱动是没啥问题的 先查看usb log rootlinaro-alip:/# dmesg | grep usb [ 1.723797] usbcore: registered new interface driver usbfs [ 1.723828] usbcore: regis…

苹果平板如何录屏?这个方法亲测有效!

“苹果的平板可以录屏吗&#xff0c;买了个平板拿来上网课&#xff0c;但是老师讲课速度太快了&#xff0c;就想说录下来&#xff0c;可是找不到哪里可以录制&#xff0c;有人知道苹果平板如何录屏吗&#xff1f;” 苹果平板作为一款功能强大的设备&#xff0c;不仅适用于日常…

全网最全MySQL锁全面解析

目录 1. 锁的分类 1.1 从操作类型划分&#xff0c;分为读锁和写锁&#xff1b; 1.2 从锁的粒度划分&#xff0c;分为全局锁&#xff0c;表锁&#xff0c;页锁&#xff0c;行锁&#xff1b; 1.3 从锁的态度划分&#xff0c;分为乐观锁和悲观锁&#xff1b; 2. 读锁和写锁 …

说说JavaScript与DOM之间的关系

dom&#xff08;文档对象模型&#xff09;是JavaScript的一个组成部分&#xff0c;它为JavaScript提供处理网页内容的方法和接口&#xff1b;JavaScript对网页进行的所有操作都是通过DOM进行的。 完整的 JavaScript 是由以下三个部分组成&#xff1a; 核心&#xff08;ECMAScri…

elementui el-table在有summary-method时,table数据行将合计行遮挡住了

前端使用框架&#xff1a;elementUI 使用组件&#xff1a;el-table 在表格内添加合计了合计行&#xff0c;根据业务多次调用数据渲染画面后&#xff0c;偶然导致画面变成如下图所示&#xff0c;table的数据行将合计行遮挡住了&#xff0c;且这个现象有时候好用&#xff0c;有…