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

vue-Router中通过路由地址path中的数据转换为props传参,不建议添加多个可选参数

目录

一、问题

二、原因及解决方法

三、总结


一、问题

1.一个页面是通过路哟跳转的,要传递参数。之前使用的是 路径转props.为保持代码一致性,也采用这种方式传参。但是发现第一次是正确的,但是如果点击浏览器左上角的刷新按钮 参数解析错误

二、原因及解决方法

1.具体代码

      {// :xxx?表示属性可选      type,defaultBusiScopeDesc,submitParams可选path: 'edit-factory-qualification/:id/:type?/:defaultBusiScopeDesc?/:submitParams?',name: 'EditFactoryQualification',component: () =>import('@/views/commodity-management/activities-on-shelf/factory-qualification/edit-qualification/index.vue'),meta: {title: '厂家资质'},props: (route) => {// 测试——查看数据console.log('params',{id: route.params.id,type: route.params.type || '',defaultBusiScopeDesc: route.params.defaultBusiScopeDesc || '',submitParams: route.params.submitParams || {}},route.params)// 使用path中的数据转换为props传参return {id: route.params.id,type: route.params.type || '',defaultBusiScopeDesc: route.params.defaultBusiScopeDesc || '',submitParams: route.params.submitParams || {}}}}
//跳转
const router = useRouter()
function handleEdit(record: FactoryQuaActItem) {router.push({name: 'EditFactoryQualification',params: {id: record.id,defaultBusiScopeDesc: '中药饮片',submitParams: JSON.stringify({ id: record.id, factoryId: record.factoryId })}})
}

2. 具体错误: 刷新后,页面取到的值是错误的,没有把type当成缺省项

3.解决方法

1)需要缺省的数据写到路径的最末尾,多个参数需要缺省,越有可能缺省的放在最后面: 上面的代码中 type缺省时,defaultBusiScopeDesc和submitParams不缺省。可以将type放在路径的最后面,避免解析错误

2)尽量不要在路径中 添加多个缺省参数,再用props解析。可以自己在页面中使用 route.params来解析,以免出现错误

三、总结

1.路径中使用参数作为props传递时,最有可能缺省的参数要写在最末尾。否则有可能页面刷新,获取的数据是错误的

2.尽量不要在路径中使用多个参数并且多个参数缺省

3.前人写的代码用的太多了,没法改,所以只能将就用了。改成query取值,好歹不会出现在 路径中因为解析错误,导致的取值错误

http://www.dtcms.com/a/350892.html

相关文章:

  • More Effective C++ 条款07:不要重载、和,操作符
  • linux的conda配置与应用阶段的简单指令备注
  • Typora + PicList + Gitee 图床完整配置教程
  • 《P1656 炸铁路》
  • C++ 编译链接杂谈——前向声明
  • JavaScript 类中静态变量与私有变量的区别及用法
  • eniac:世界上第一台通用电子计算机的传奇
  • 开发避坑指南(36):Java字符串Base64编码实战指南
  • 深度学习-----《PyTorch深度学习核心应用解析:从环境搭建到模型优化的完整实践指南》
  • 初步了解多线程
  • 交换机是如何同时完成帧统计与 BER/FEC 分析的
  • 【应急响应工具教程】SPECTR3:通过便携式 iSCSI 实现远程证据的只读获取与分析
  • [pilot智驾系统] 模型守护进程(modeld)
  • rbio1:以生物学世界模型为软验证器训练科学推理大语言模型
  • 面试八股文之——JAVA基础
  • 深度学习梯度下降与交叉熵损失
  • 重塑企业沟通与增长:云蝠智能大模型如何成为您的智能语音中枢
  • 大模型(一)什么是 MCP?如何使用 Charry Studio 集成 MCP?
  • SQL查询-设置局部变量(PostgreSQL、MySQL)
  • 嵌入式学习 day58 驱动字符设备驱动
  • 玳瑁的嵌入式日记D25-0825(进程)
  • Java全栈开发实战:从Spring Boot到Vue3的项目实践
  • Android Glide 缓存机制深度解析与优化:从原理到极致实践
  • 集成电路学习:什么是ONNX开放神经网络交换
  • 深度学习③【卷积神经网络(CNN)详解:从卷积核到特征提取的视觉革命(概念篇)】
  • 详解 Transformer 激活值的内存占用公式
  • SOME/IP-SD报文中 Entry Format(条目格式)-理解笔记5
  • 算法题记录01:
  • 0826xd
  • Trip Footprints 旅行App开发全流程解析