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

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.lryc.cn/news/158069.html

相关文章:

  • Mysql触发器
  • 认识doubbo和rpc
  • get_views中list的arch格式
  • 淘宝商品销量接口API更新(总销+精准月销API)
  • Android 11编译第三弹 ADB开启ROOT权限
  • 《TCP/IP网络编程》--基于TCP实现字符串对话和文件传输
  • Feign负载均衡写法
  • OpenCV(二十八):连通域分割
  • 达梦控制台还原报错“管道失败”
  • [杂谈]-快速了解直接内存访问 (DMA)
  • java八股文面试[设计模式]——23种设计模式
  • mysql(十)mysql主从复制--主库切换
  • vue3项目的src下的各个文件夹介绍
  • 五、编译预处理
  • 应用出海,Google 分享如何让数字营销素材再上层楼
  • 酱香咖啡喝了没?用数据分析揭秘瑞幸咖啡的7500万用户增长策略
  • Grafana之魔法:揭秘数据可视化的艺术
  • c高级day2作业
  • 第3章 【MySQL】字符集和比较规则
  • 2023 年全国大学生数学建模D题目-圈养湖羊的空间利用率
  • 攻防世界-WEB-ics-05
  • typedef的四种用法
  • Rstudio开不开了怎么办?R is taking longer to start than usual
  • kubernetes 集群安装加载 br_netfilter 模块
  • CATIA Composer软件安装包分享(附安装教程)
  • 入行测试一年半的心得体会
  • Vue的props配置项
  • Python开源项目周排行 2023年第32周
  • Python实现猎人猎物优化算法(HPO)优化卷积神经网络回归模型(CNN回归算法)项目实战
  • mysql8 Found option without preceding group错误