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

在使用`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.hqwc.cn/news/99369.html

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

相关文章

企业宣传片和传统纸媒相关优劣

在当今数字化时代,传统纸媒和宣传片成为了企业和组织宣传推广的两种主要方式。然而,面对有限的资源和日益竞争的市场环境,我们需要仔细权衡选择哪种方式更加适合。接下来由深圳企业宣传片制作公司老友记小编从以下几个方面浅析一下它们的优势…

886. 可能的二分法

886. 可能的二分法 原题链接:完成情况:题解一:题解二: 原题链接: 886. 可能的二分法 https://leetcode.cn/problems/possible-bipartition/description/ 完成情况: 题解一: package LeetCod…

高基数类别特征预处理:平均数编码 | 京东云技术团队

一 前言 对于一个类别特征,如果这个特征的取值非常多,则称它为高基数(high-cardinality)类别特征。在深度学习场景中,对于类别特征我们一般采用Embedding的方式,通过预训练或直接训练的方式将类别特征值编…

【ES】笔记-Set集合实践

JS <script>let arr[1,2,3,4,5,4,3,2,1];//1.数组去重let result0[...new Set(arr)];console.log(数组去重${result0});//2.交集let arr2[4,5,6,5,6];let result[...new Set(arr)].filter(item>{let s2new Set(arr2);//4 5 6if(s2.has(item)){return true;}else{retur…

Direct3D绘制旋转立方体例程

初始化文件见Direct3D的初始化_direct3dcreate9_寂寂寂寂寂蝶丶的博客-CSDN博客 D3DPractice.cpp #include <windows.h> #include "d3dUtility.h" #include <d3dx9math.h>IDirect3DDevice9* Device NULL; IDirect3DVertexBuffer9* VB NULL; IDirect3…

基于Linux并结合socket网络编程的ftp服务器的实现

项目需求 客户端能够通过调用“get”指令&#xff0c;来获取服务器的文件客户端能通过“server_ls”指令&#xff0c;来获取服务器路径下的文件列表客户端能通过“server_cd”指令&#xff0c;进入服务器路径下的某文件夹客户端可以通过“upload”指令&#xff0c;上传自己的本…

从0到1实现播放控制器

这系列文章主要讲诉如何从0到1使用QT实现带时间显示、滚动字幕等的自定义配置视频播放控制器。平时我们乘坐地铁经常看到各条线的播放控制器都大同小异。其实都是通过QT等界面开发软件来实现的。 在具体开发之前&#xff0c;需要明确我们需要做什么&#xff1f; 1. 开发一个可…

uni-app开发小程序,radio单选按钮,点击可以选中,再次点击可以取消

一、实现效果&#xff1a; 二、代码实现&#xff1a; 不适用官方的change方法&#xff0c;自己定义点击方法。 动态判断定义的值是否等于遍历的值进行回显&#xff0c;如果和上一次点击的值一样&#xff0c;就把定义的值改为null <template><view><radio-group&…

【广州华锐互动】利用AR远程指导系统进行机械故障排查,实现远程虚拟信息互动

随着工业自动化和智能化的不断发展&#xff0c;机械故障诊断已经成为了工业生产中的重要环节。为了提高故障诊断的准确性和效率&#xff0c;近年来&#xff0c;AR&#xff08;增强现实&#xff09;远程协助技术逐渐应用于机械故障诊断领域。本文将探讨AR远程协助技术在机械故障…

docker打包vue vite前端项目

打包vue vite 前端项目 1.打包时将测试删除 2.修改配置 3.打包项目 npm run build 显示成功&#xff08;黄的也不知道是啥&#xff09; 打包好的前端文件放入 4.配置 default.conf upstream wms-app {server 你自己的ip加端口 ;server 192.168.xx.xx:8080 ; } server { …

mysql数据库使用技巧整理

查看当前数据库已建立的client连接 mysql中执行 -- 查看数据库允许的最大连接数&#xff0c;不是实时正在使用的连接数 SHOW VARIABLES LIKE max_connections; mysql中执行 -- 查看当前数据库client的连接数 SHOW STATUS LIKE Threads_connected; mysql中执行 -- 查看具…

Linux中安装MySQL5.7.42

1. 首先&#xff0c;下载mysql5.7.42的安装包&#xff08;下方是下载地址&#xff09;&#xff0c;选择红色框框的下载&#xff08;注意的是&#xff0c;这个链接只提供5.7的版本下载&#xff0c;可能还会更新&#xff0c;不一定打开就是5.7.42的版本&#xff0c;后续可能会有4…