Passing values between uniapp project pages

1. Pass single or multiple parameters

Method: splice directly after the address

1. Splice the parameters to be passed after the address on the page to be jumped. When passing multiple parameters, use the ampersand to splice them together.

//任务列表页传递id  跳转到相应的任务详情页
gettaskList(id){
//传递多个参数时直接用&符拼接
				uni.navigateTo({
					url:'gettaskList?id=${id}'
				})

}

2. When receiving, receive the parameters passed in the onload function of the page

// 任务详情页通过 onLoad 生命周期中接传递过来的参数 id
onLoad(option){
 console.log('上一个页面传递过来的参数', option)
 console.log('id', option.id)
 console.log('item', option.item)
 // 接下来就是你需要该id做些什么,比如通过id查询到该详情等
}

2. Transfer object

If there are many parameters that need to be passed, the URL of the API that jumps to the page from uniapp has a length limit, and the following methods need to be used for data transfer:

// item 为该列表的每一项的数据对象;encodeURIComponent 为uniapp 提供的api
getTaskList(item) {
	uni.navigateTo({
		 url: `getTaskList?item=${encodeURIComponent(JSON.stringify(item))}`,
	});
}

When receiving

// 同样onLoad 生命周期中进行接收, decodeURIComponent 为uniapp 提供的api
onLoad(option) {
	const item = JSON.parse(decodeURIComponent(option.item));
	console.log('上一个页面传递过来的参数对象',item );
	// 接下来就是你需要该对象数据做些什么,当然这里你可以直接赋值给data绑定的数据
	this.objData = item;
}

Note: When passing data, you must use  JSON.stringify  to convert it into a JSON string, and then you must use  JSON.parse  to parse it when receiving it!
The same goes for operating on arrays, because arrays are also objects.

Guess you like

Origin blog.csdn.net/weixin_61728046/article/details/127581283