别再乱找了 Uniapp 页面传参就靠这招路由传参

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

 

  • 原理:通过在页面跳转的 URL 中以key=value的形式附加参数,将数据传递到目标页面,接收页面可从 URL 中解析出参数值。
  • 实现步骤
    • 发送页面:使用uni.navigateTouni.redirectTo等跳转方法来传递参数。例如要跳转到detail页面并传递商品idname,代码如下:
      let productId = 1;
      let productName = "示例商品";
      uni.navigateTo({
          url: `/pages/detail/detail?id=${productId}&name=${productName}`
      });

       

    • 接收页面:在目标页面的onLoad生命周期函数中,通过options参数获取传递过来的值,示例代码如下:
      export default {
          onLoad(options) {
              const id = options.id;
              const name = options.name;
              console.log(`接收到的id: ${id}, 接收到的name: ${name}`);
          }
      };

       

    • 适用场景
      • 从列表页跳转到详情页时,传递列表项的唯一标识等信息,以便详情页根据该标识获取具体数据并展示。
      • 在多步骤表单流程中,从一个步骤页面跳转到下一个步骤页面时,传递上一步填写的部分数据。
    • 优缺点
      • 优点:使用简单直观,在页面跳转时可以直接携带参数,对于传递少量数据非常方便,而且在不同平台上兼容性较好。
      • 缺点:传递的数据类型一般以字符串为主,如果传递复杂数据类型需要进行序列化和反序列化操作。同时,参数会暴露在 URL 中,存在一定的安全风险,不适合传递敏感信息。

 

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烂蜻蜓

写点东西换瓶快乐水

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值