uniapp路由跳转优雅传递对象
2022-10-09 06:29:41
257

文章封面

页面跳转时携带参数是在开发中很常见,通常是携带一些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');
}

附:EventChannel 文档

如有帮助,点赞鼓励一下吧!
评论
一键登录