vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例

背景:vue项目 使用this.$router.push进行路由跳转时,可以通过query或params参数传递和接收参数。

通过query参数传递参数:

// 传递参数
this.$router.push({path: '/target',query: {id: 1,name: 'John'}
});
// 接收参数
this.$route.query.id  // 1
this.$route.query.name  // 'John'

通过params参数传递参数(用于动态路由):

// 传递参数
this.$router.push({name: 'target',params: {id: 1,name: 'John'}
});
// 接收参数
this.$route.params.id  // 1
this.$route.params.name  // 'John'

注意事项

query参数通过URL中的查询字符串传递,而params参数通过URL中的路径参数传递。根据你的实际需求和路由配置,选择适合的参数传递方式。
需要注意的是,使用params参数时,要确保目标路由配置中动态路由参数已正确声明。例如:

// 路由配置
{path: '/target/:id',name: 'target',component: TargetComponent
}

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

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

相关文章

初学者向导:Sketch设计软件自学教程大全

Sketch软件是Mac平台上流行的矢量图形编辑软件,旨在帮助用户创建各种设计原型,如网站、移动应用程序、图标等。Sketch软件的设计风格简单明了,界面操作简单易用,非常适合UI/UX设计师、平面设计师等数字创意人员。本文作为软件自学…

技巧篇:在Pycharm中配置集成Git

一、在Pycharm中配置集成Git 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: https://git-for-windows.github.io/ 0. git中的一些常用词释义 Repository name: 仓库名称 Description(可选):…

基于 React 的 HT for Web ,由厦门图扑团队开发和维护 - 用于 2D/3D 图形渲染和交互

本心、输入输出、结果 文章目录 基于 React 的 HT for Web ,由厦门图扑团队开发和维护 - 用于 2D/3D 图形渲染和交互前言什么是 HT for WebHT for Web 的特点如何使用 HT for Web相关链接弘扬爱国精神 基于 React 的 HT for Web ,由厦门图扑团队开发和维…

这款开源神器,让聚类算法从此变得简单易用

Scikit-Learn 以其提供的多个经过验证的聚类算法而著称。尽管如此,其中大多数都是参数化的,并需要设置集群的数量,这是聚类中最大的挑战之一。 通常,使用迭代方法来决定数据的最佳聚类数量,这意味着你需要多次进行聚类…

Netty入门指南之NIO Selector监管

作者简介:☕️大家好,我是Aomsir,一个爱折腾的开发者! 个人主页:Aomsir_Spring5应用专栏,Netty应用专栏,RPC应用专栏-CSDN博客 当前专栏:Netty应用专栏_Aomsir的博客-CSDN博客 文章目录 参考文献前言问题解…

深入解析Nacos:服务发现、配置管理与更多特性解析

🎏:你只管努力,剩下的交给时间 🏠 :小破站 深入解析Nacos:服务发现、配置管理与更多特性解析 前言第一:Nacos初识配置中心对比 第二:Nacos关键特性服务注册与发现1. 自动注册2. 动态…

YOLOv5项目实战(3)— 如何批量命名数据集中的图片

前言:Hello大家好,我是小哥谈。本节课就教大家如何去批量命名数据集中的图片,希望大家学习之后可以有所收获!~🌈 前期回顾: YOLOv5项目实战(1)— 如何去训练模型 YOLOv5项目实战(2࿰

【L2GD】: 无环局部梯度下降

文章链接:Federated Learning of a Mixture of Global and Local Models 发表期刊(会议): ICLR 2021 Conference(机器学习顶会) 往期博客:FLMix: 联邦学习新范式——局部和全局的结合 目录 1.背景介绍2. …

【嵌入式设计】Main Memory:SPM 便签存储器 | 缓存锁定 | 读取 DRAM 内存 | DREM 猝发(Brust)

目录 0x00 便签存储器(Scratchpad memory) 0x01 缓存锁定(Cache lockdown) 0x02 读取 DRAM 内存 0x03 DREM Banking 0x04 DRAM 猝发(DRAM Burst) 0x00 便签存储器(Scratchpad memory&#…

golang 解析oracle 数据文件头

package mainimport ("encoding/binary""fmt""io""os" ) // Powered by 黄林杰 15658655447 // Usered for parser oracle datafile header block 1 .... // oracle 数据文件头块解析 // KCBlockStruct represents the structure of t…

如何在聊天记录中实时查找大量的微信群二维码

10-5 如果你有需要从微信里收到的大量信息中实时找到别人发到群里的二维码,那本文非常适合你阅读,因为本文的教程,可以让你在海量的微信消息中,实时地把二维码自动挑出来,并且帮你分类保存。 如果你是做网推的&#…

C# 常用数据类型转换

1.字符串类型浮点数转float类型 string strNumber "71.068";float floatNumber float.Parse(strNumber); //输出floatNumber 71.068 2.浮点数转4个字节(float类型),double默认转8个字节 float floatNumber 71.068f;byte[] resul…

工业物联网网关的数据采集流程分享

工业物联网(IIoT)在实现生产自动化、提高效率、降低成本等方面发挥着重要作用。工业物联网网关作为连接设备与云端系统的关键组件,其数据采集流程对于实现高效、可靠的数据传输至关重要。工业物联网网关的数据采集流程是实现工业物联网系统高…

C#不安全代码

在C#中,“不安全代码”(unsafe code)通常指的是那些直接操作内存地址的代码。它允许开发者使用指针等低级别的数据结构,这些在通常的安全代码(safe code)中是不允许的。C# 的不安全代码提供了一种方式&…

Reids集群

目录 一、集群的概念 1.为什么要搭建集群? 2.Redis搭建集群是否需要考虑状态同步的问题? 二、Redis集群的模式 1.redis集群--主从模式 1.1什么是Redis的主从模式? 1.2.主从模式它们之间的数据是怎么实现一个同步的? 1.3.主…

git的常见命令介绍

git的常见命令介绍 Git命令: Git命令: 1)git init:在当前目录下初始化一个新的Git仓库。 2)git clone :克隆(下载)一个Git仓库到本地。 3)git status:查看仓…

图形学 -- Geometry几何

隐式 implicit 基于给点归类,满足某些关系的点 缺点:不规则表面难以描述! algebraic surface 直接用数学公式表示:不直观! Constructive Solid Geometry(CSG) 用简单形状进行加减 distance …

腾讯云轻量服务器购买优惠,腾讯云轻量应用服务器优惠购买方法

你是否曾经为如何选择合适的服务器而苦恼?在互联网的海洋中,如何找到一个性价比高,性能稳定,价格合理的服务器供应商,确实是一个让人头疼的问题。今天,我要向你介绍的,是腾讯云轻量应用服务器的…

Perl爬虫程序的框架

Perl爬虫程序的框架,这个框架可以用来爬取任何网页的内容。 perl #!/usr/bin/perl use strict; use warnings; use LWP::UserAgent; use HTML::TreeBuilder; # 创建LWP::UserAgent对象 my $ua LWP::UserAgent->new; # 设置代理信息 $ua->proxy(http, ); …

Linux C/C++全栈开发知识图谱(后端/音视频/游戏/嵌入式/高性能网络/存储/基础架构/安全)

众所周知,在所有的编程语言中,C语言是一门颇具学习难度,需要很长学习周期的编程语言。甚至很多人经常听到一句调侃的话语——“C,从入门到放弃”。 C界的知名书籍特别多,从简单到高端书籍,许多书籍都是C之…