uni.navigateto传参对象 数组
时间: 2025-06-19 19:37:07 浏览: 15
### 使用 `uni.navigateTo` 传递对象和数组
当需要通过 `uni.navigateTo` 方法在页面间传递复杂的数据结构如对象或数组时,通常的做法是先将这些数据序列化成字符串形式再附加到 URL 参数中。到达目标页面后,可以通过解码来恢复原始的对象或数组。
#### 发送端(A 页面)
对于发送方而言,在调用 `uni.navigateTo` 的时候,应该把要传输的对象或数组转换为 JSON 字符串,并将其作为查询参数的一部分加入到导航链接里:
```javascript
// 假设有一个名为 dataObject 的 JavaScript 对象以及一个叫 dataArray 的数组
const dataObject = { name: "张三", age: 28 };
const dataArray = ["苹果", "香蕉", "橙子"];
// 将其转化为JSON字符串并编码
const objectString = encodeURIComponent(JSON.stringify(dataObject));
const arrayString = encodeURIComponent(JSON.stringify(dataArray));
// 调用 navigateTo 函数进行跳转并附带参数
uni.navigateTo({
url: `/pages/targetPage/targetPage?dataObj=${objectString}&dataArray=${arrayString}`
});
```
#### 接收端(B 页面)
而在接收的一侧,则是在页面加载的时候利用 `onLoad()` 生命周期钩子函数获取传入的选项参数,并尝试解析回原来的形式:
```javascript
export default {
onLoad(options) {
try {
const receivedDataObj = decodeURIComponent(options.dataObj);
const parsedDataObj = JSON.parse(receivedDataObj);
const receivedDataArray = decodeURIComponent(options.dataArray);
const parsedDataArray = JSON.parse(receivedDataArray);
console.log('接收到的对象:', parsedDataObj); // 输出: Object {name: "张三", age: 28}
console.log('接收到的数组:', parsedDataArray); // 输出: Array ["苹果", "香蕉", "橙子"]
} catch (error) {
console.error("解析失败:", error.message);
}
},
};
```
需要注意的是,由于 URL 长度有限制,因此不适合用来传送非常庞大的数据集;另外也要考虑到安全性方面的问题,比如防止 XSS 攻击等[^1]。
阅读全文
相关推荐














