uniapp，上一个页面向下一个页面传参

最新推荐文章于 2025-08-16 11:30:58 发布

原创最新推荐文章于 2025-08-16 11:30:58 发布 · 836 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

本文介绍了在uniapp中如何实现从一个页面到另一个页面的参数传递。通过在跳转URL后添加问号和参数，例如`detail/detail?id=80&age=20`，可以在下一个页面的`onLoad`生命周期里使用`options`对象来接收并解析这些参数。详细代码示例和实际效果展示辅助理解这一过程。

上一个页面跳转到下一个页面需要携带参数时，可以在跳转路径后+？+参数名+ = +参数值，如有多个参数用&连接
如从index页面跳转到详情页需要传id 和age两个参数
detail/detail?id=80&age=20

当前页面代码如下

<navigator url="../detail/detail?id=80&age=20">跳转下一页面，并传参id和age</navigator>

下一个页面在onLoad生命周期options接收参数
下一页面代码如下

<template>
	<view>
		接收上一个页面的参数id{{id}}和age{{age}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				age:''
			}
		},
		onLoad(options) {//options接收上一个页面传的参数
			this.id = options.id;
			this.age = options.age;
			console.log(options);
		},
		methods: {
			
		}
	}
</script>

<style>

</style>