uniapp 跳转传递对象
时间: 2023-10-02 15:04:17 浏览: 53
在uni-app中实现页面跳转并传递对象参数的方法有两种:
1. 将需要传递的对象参数转为JSON字符串,然后使用encodeURIComponent进行编码,拼接在url后面。在跳转后的页面通过onLoad事件获取传递的对象参数,并使用decodeURIComponent解码,然后转为对象。
2. 使用url拼接将参数对象传递到目标页面,在目标页面的onLoad生命周期函数中通过options参数获取传递过来的参数,然后使用decodeURIComponent解码,再转为对象。
下面是具体的实现代码:
方法一:
```javascript
// 要跳转的页面路径
const url = '/pages/detail/detail';
// 要传递的对象参数
const obj = { id: 123, name: 'test' };
// 将对象参数转为JSON字符串,并使用encodeURIComponent编码
const params = encodeURIComponent(JSON.stringify(obj));
// 跳转页面并传递对象参数
uni.navigateTo({ url: `${url}?params=${params}` });
```
在跳转后的页面的detail.vue文件中:
```javascript
export default {
data() {
return {
obj: null
}
},
onLoad(options) {
// 获取传递的对象参数,使用decodeURIComponent解码,并转为对象
if ('params' in options) {
this.obj = JSON.parse(decodeURIComponent(options.params));
}
}
}
```
方法二:
```javascript
// 要传递的对象参数
let infoForm = {
phone: this.form['客户信息']['办理宽带号码'],
name: this.form['客户信息']['姓名'],
city: this.form['客户信息']['详细地址'].address,
cityCode: this.form['客户信息']['详细地址'].cityCode
};
// 将参数对象转为JSON字符串,并使用encodeURIComponent编码
let params = encodeURIComponent(JSON.stringify(infoForm));
// 跳转页面并传递对象参数
uni.navigateTo({ url: '/pages/broadband/broadband?item=' + params });
```
在跳转后的页面的broadband.vue文件中的onLoad生命周期函数中:
```javascript
onLoad(options) {
// 获取传递的对象参数,使用decodeURIComponent解码,并转为对象
if ('item' in options) {
this.infoForm = JSON.parse(decodeURIComponent(options.item));
}
}
```