页面跳转时携带参数是在开发中很常见,通常是携带一些id之类的简单参数。也有一些需要传递复杂数据的场景,例如传递对象可以
JSON.stringify(Object)后再与路由拼接。但是各端都对url长度有限制,数据稍大转JSON后传入url中,超长的部分会被截断,导致落地的页面收到不完整的JSON数据,从而JSON解析失败。下面我们使用页面间事件通信通道EventChannel来实现这个需求。
示例:
A页面跳转B页面并传对象参数
// pageA.vue
let Obj = {
title: 'Heylzh',
link: 'https://www.heylzh.com',
desc: '极简个人博客网站'
};
uni.navigateTo({
url: '/pageB',
success: (res) => {
res.eventChannel.emit('msg', Obj)
}
});
B页面接收参数
// pageB.vue
data() {
return {
eventChannel:null,
msg:null
}
},
onLoad(option) {
this.eventChannel = this.getOpenerEventChannel();
// 监听msg事件,并接收事件参数
eventChannel.on('msg', (params) => {
this.msg = params;
})
},
onUnload() {
// 页面销毁时取消监听
this.eventChannel.off('msg');
}