uniapp路由传参和接参
时间: 2025-06-21 15:57:15 浏览: 11
### 在 UniApp 中进行路由传参和接参的示例
在 UniApp 中,路由传参主要通过 URL 的 `key=value` 形式实现。发送页面可以通过 `uni.navigateTo` 或其他跳转方法传递参数,接收页面则通过 `onLoad` 生命周期函数解析这些参数[^4]。
#### 发送页面代码示例
以下是一个从主页面跳转到详情页面并传递参数的示例:
```javascript
let productId = 1;
let productName = "示例商品";
uni.navigateTo({
url: `/pages/detail/detail?id=${productId}&name=${productName}`
});
```
上述代码中,`id` 和 `name` 是传递的两个参数,分别表示商品 ID 和名称。参数之间用 `&` 分隔,键值对用 `=` 连接[^3]。
#### 接收页面代码示例
在目标页面(如 `detail` 页面)中,可以通过 `onLoad` 方法获取传递的参数。以下是接收参数的代码示例:
```javascript
export default {
onLoad(options) {
console.log('接收到的参数:', options);
const id = options.id; // 获取商品 ID
const name = options.name; // 获取商品名称
console.log(`商品 ID: ${id}, 商品名称: ${name}`);
}
}
```
`onLoad` 函数中的 `options` 参数包含了所有通过 URL 传递的数据,开发者可以直接访问这些数据并用于页面逻辑处理[^4]。
#### 注意事项
1. 如果需要传递文件路径等特殊参数,需注意路径可能被转义的问题。例如,动态加载图片路径时应避免直接使用 `require`,因为其主要用于加载 JavaScript 模块或 JSON 文件[^2]。
2. 参数的值如果包含特殊字符(如 `&`, `=`, `?`),需要对其进行编码处理以防止解析错误。可以使用 `encodeURIComponent` 方法对参数值进行编码[^3]。
```javascript
let encodedName = encodeURIComponent("示例商品");
uni.navigateTo({
url: `/pages/detail/detail?id=${productId}&name=${encodedName}`
});
```
解码时,接收页面无需额外操作,`onLoad` 中的 `options` 已经自动完成了解码过程[^3]。
---
###
阅读全文
相关推荐


















