uni-app H5模式下query取值不正确

uni-app H5模式下query取值不正确

开发环境 版本号 项目创建方式
Mac 11.5.2 HBuilderX

示例代码：

onLoad(options) {
console.log(options)
}

操作步骤：

运行代码，访问页面并给参数为code=123
注意，正确的哈希模式，应该是地址+query+哈希路径（http://www.baidu.com/index.html?code=123#/pages/sample/sample），而不是（http://www.baidu.com/index.html#/pages/sample/sample?code=123）

预期结果：

日志输出：{code=123}

实际结果：

日志输出：null

bug描述：

H5模式下query取值不正确
比方说url为 http://www.baidu.com/index.html?code=123#/pages/sample/sample
正确的onload(options)回调中，options的code值应该为123
然而实际上取到的options为null


更多关于uni-app H5模式下query取值不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

http://www.baidu.com/index.html?code=123这样就行了啊，没试过取不到的

更多关于uni-app H5模式下query取值不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


只是举了一个简单的路径例子，注意我的描述 正确的url路径由协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分组成 锚点在参数后面 现在uni里面参数部分跟锚点部分顺序反了

在uni-app的H5模式下，onLoad中的options参数默认只解析哈希路径后的query参数（即#后面的部分），而不是解析主URL的query参数。这是由uni-app的路由机制决定的。

根据你的描述，URL结构为http://www.baidu.com/index.html?code=123#/pages/sample/sample，此时code=123位于哈希路径之前，onLoad无法直接获取到。

解决方案：

  1. 修改URL结构（推荐）： 将query参数移到哈希路径后面：

    http://www.baidu.com/index.html#/pages/sample/sample?code=123

    这样onLoad就能正确获取到{code: '123'}。

  2. 手动解析主URL的query参数： 如果无法修改URL结构，可以在onLoad中通过window.location.search自行解析：

    onLoad(options) {
  // 解析哈希路径后的参数（uni-app默认行为）
  console.log(options);
  
  // 手动解析主URL的query参数
  const searchParams = new URLSearchParams(window.location.search);
  const code = searchParams.get('code');
  console.log('主URL参数:', { code });
}
回到顶部