uniapp如何路由传参
时间: 2025-04-08 13:20:45 浏览: 39
### 通过路由传递参数的方法
在 UniApp 中,可以通过 `uni.navigateTo` 或其他类似的 API 实现页面之间的跳转,并附带参数。这些参数通常以查询字符串的形式附加到目标页面的 URL 上。
以下是详细的说明以及代码示例:
#### 参数传递方式
发送页面可以通过 `url` 属性中的查询字符串形式传递参数给目标页面。具体来说,在调用 `uni.navigateTo` 或类似方法时,可以在 `url` 后面追加形如 `key=value&key2=value2` 的参数列表[^2]。
#### 接收参数的方式
当目标页面接收到请求后,其生命周期函数 `onLoad(options)` 将会自动解析 URL 中的参数,并将它们作为对象提供给开发者使用[^3]。
---
### 示例代码
#### 发送页面:传递参数
假设我们需要从当前页面跳转至详情页 (`/pages/detail/detail`) 并传递两个参数——产品 ID 和名称,则可以按照以下方式进行操作:
```javascript
let productId = 1;
let productName = "示例商品";
uni.navigateTo({
url: `/pages/detail/detail?id=${encodeURIComponent(productId)}&name=${encodeURIComponent(productName)}`
});
```
注意这里使用了 `encodeURIComponent()` 函数对特殊字符进行了编码处理,防止因路径中存在非法字符而导致错误[^1]。
#### 目标页面:接收参数
在目标页面 (即 `/pages/detail/detail`) 的脚本部分定义 `onLoad` 生命周期钩子即可获取上述传递过来的数据:
```javascript
export default {
onLoad(options) {
console.log('接收到的产品ID:', decodeURIComponent(options.id)); // 输出: 1
console.log('接收到的产品名:', decodeURIComponent(options.name)); // 输出: 示例商品
this.productId = options.id;
this.productName = options.name;
},
data() {
return {
productId: '',
productName: ''
};
}
};
```
此处同样利用了 `decodeURIComponent()` 来解码可能存在的百分号序列[^4]。
---
### 注意事项
- 如果需要传输复杂结构化数据(比如数组或对象),建议先将其转换成 JSON 字符串后再进行 Base64 编码,从而减少潜在兼容性问题。
- 对于涉及敏感信息的情况,请考虑采用加密手段保护数据安全。
---
阅读全文
相关推荐



















