URL页面跳转传参

URL页面跳转传参

<a href="index.html?age=18&sex=男">url传参、接参</a>
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return (false);
  }

  decodeURI(getQueryVariable("age"));//18
  decodeURI(getQueryVariable("sex"));//男
<think>嗯,用户想知道在UniApp中如何实现页面跳转时传递参数以及接收参数。首先,我需要回忆一下UniApp的相关知识。记得UniApp有页面跳转的API,比如uni.navigateTo,还有组件跳转的方式,比如使用<navigator>组件。传参的话,应该是在URL后面添加查询参数,然后在目标页面的onLoad生命周期函数获取options参数来接收。 然后,用户需要具体的示例,所以我得举几个例子。比如,使用uni.navigateTo跳转时,在URL后面加上?key=value这样的参数。目标页面在onLoad中通过options.key来获取值。可能还需要提到不同跳转方式的区别,比如redirectTo会关闭当前页面,而navigateTo是保留当前页面,这样用户可以根据需要选择。 还要注意,传递的参数如果是对象或数组的话,需要用JSON.stringify转换,接收的时候再用JSON.parse解析。这部分容易出错,应该特别提醒用户。此外,页面路径的写法要正确,比如/pages/detail/detail这样的绝对路径,避免路径错误导致跳转失败。 另外,参考用户提供的引用内容,面提到了url传参和onLoad中的options参数获取,需要确保示例代码和这些引用一致。可能还需要区分组件跳转和API跳转的不同传参方式,比如在<navigator>的url属性直接加参数,和通过API跳转时在url拼接参数。 最后,生成相关问题的时候,要考虑用户可能进一步想知道的内容,比如参数类型限制、传递复杂数据的方法、不同跳转方式的区别,以及参数长度限制等。这些问题可以帮助用户更全面地理解和应用页面传参的功能。</think>### UniApp页面跳转传参及接收参数方法 在UniApp中实现页面跳转传参,可通过以下两种方式实现(支持组件和API两种跳转模式): #### 一、组件跳转传参示例 ```html <!-- 在A页面 --> <navigator url="/pages/B/B?name=张三&age=20">跳转到B页面</navigator> ``` #### 二、API跳转传参示例 ```javascript // 在A页面 uni.navigateTo({ url: '/pages/B/B?name=张三&age=20&hobbies=["篮球","阅读"]' }) ``` #### 三、参数接收方法 ```javascript // 在B页面的onLoad生命周期函数 export default { onLoad(options) { console.log(options.name) // 输出"张三" console.log(options.age) // 输出"20" // 解析数组类型参数 const hobbies = JSON.parse(options.hobbies) } } ``` #### 四、注意事项 1. 参数传递需遵循URL编码规范,特殊字符需使用`encodeURIComponent`处理 2. 对象/数组类型参数需先转换为JSON字符串: ```javascript const params = JSON.stringify({ city: "北京", vip: true }) uni.navigateTo({ url: `/pages/B/B?info=${params}` }) ``` 3. 页面路径必须使用绝对路径,如`/pages/detail/detail` 4. `uni.redirectTo`等跳转方法传参方式相同[^2] ```javascript // 复杂对象传参完整示例 const userInfo = { name: "李四", level: 3, tags: ["优质客户", "新用户"] } uni.navigateTo({ url: `/pages/profile/profile?data=${encodeURIComponent(JSON.stringify(userInfo))}` }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值