uniapp页面传值

﹏ヽ暗。殇╰゛Y 2022-11-17 13:56 282阅读 0赞

## 一、传递单个或者多个参数 ##

**商品列表页：**

// 商品列表页传递id 跳转到相应的商品详情页面
    getGoodsDetails(id){ 
    	uni.navigateTo({ 
    		url: `getGoodsDetails?id=${ id}`
    	});
    }
    // 注：如果需要传递多个参数使用&符号连接即可，示例：
    getGoodsDetails(id, item){ 
    	uni.navigateTo({ 
    		url: `getGoodsDetails?id=${ id}&item=${ item}`
    	});
    }

**商品详情页面：**

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

## 二、传递数组或者对象 ##

如需要传递的参数有很多时，由uniapp 跳转页面api 的 url 有长度限制，需使用以下方式进行数据传递：

**商品列表页面：**

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

**商品详情页面：**

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

注意：传递数据的时候必须使用 **JSON.stringify** 将其转为 JSON 字符串，然后接收的时候也必须使用 **JSON.parse** 来进行解析！  
操作数组也是一样的，因为数组也是对象

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关页面传值

1、跳页面传值 2、跳页面取值 3、完整代码 4、测试项目跳页面传值：单条数据传值（MainActivity页面的代码）： Intent inte

￡神魔★判官ぃ/ 2023年08月17日 17:09/ 0 赞/ 123 阅读

相关 uniapp MUI 页面传参终极版

页面传参终极版分类：MUI [页面传值][Link 1] 页面传参数是一种比较常见的业务需求，根据实现原理及适用环境可以分为两大类。在普通浏览器端常用的方法有如

淡淡的烟草味﹌/ 2023年06月15日 11:26/ 0 赞/ 58 阅读

相关 uniapp父子组件之间传值

组件传值一. 父组件向子组件传值 > 通过`props`来实现, 子组件通过props来接收父组件传过来的值 1. 父组件 // 1. 引入子组件

冷不防/ 2023年02月26日 11:27/ 0 赞/ 25 阅读

相关 uniapp页面之间传值

页面传值 > 如果数据仅在跳转和被跳转页面中传递, 可以在跳转时传递数据. 如果数据需要多个页面使用, 可以采用本地存储处理数据一. `uni.navigateTO

朱雀/ 2023年02月26日 10:23/ 0 赞/ 26 阅读

相关 uniapp页面传值

一、传递单个或者多个参数商品列表页： // 商品列表页传递id 跳转到相应的商品详情页面 getGoodsDetails(id){ uni

﹏ヽ暗。殇╰゛Y/ 2022年11月17日 13:56/ 0 赞/ 283 阅读

相关 uniapp 传值与接收值

传值 activeDetails(item){ uni.navigateTo({ url:"../../active/detai

喜欢ヅ旅行/ 2022年10月05日 12:54/ 0 赞/ 253 阅读

相关 mui页面传值

做一个简单页面传值的demo 两个页面，分别是1.html 和2.html 在1.html中加入 var mid = 2; function go2htm

朴灿烈づ我的快乐病毒、/ 2022年03月22日 01:51/ 0 赞/ 355 阅读

相关 uniapp-页面传值加密对象处理方法

uniapp-页面传值加密对象处理方法传值页面 let params = encodeURIComponent(JSON.stringify(this.p

喜欢ヅ旅行/ 2021年09月13日 18:08/ 1 赞/ 563 阅读

相关 uniapp父子组件传值

父组件页面（parent.vue） <template> <view> <Child @out=out :backGround=backGr

灰太狼/ 2021年09月13日 15:54/ 0 赞/ 634 阅读

相关 vue父子页面传值

1.props 传值 //父组件传递参数到自组件 <template> <div> <my-vue :name="na

小鱼儿/ 2021年08月26日 20:19/ 0 赞/ 548 阅读