uni-app页面传值传递对象类型的数据

我就是我 2023-06-25 10:20 6阅读 0赞

**在pages.json 里面的pages注册这两个页面**  
1.传值页面

<template>
    	<view @click="navBar()">
    		传递信息
    	</view>
    </template>
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			navBar() { 
    				let obj = { 
    					name: '张三',
    					age: 20,
    					sex: '男',
    					school: '三道口职业技术学院'
    				};
    				// 加密传递的对象数据
    				let item = encodeURIComponent(JSON.stringify(obj))
    				uni.navigateTo({ 
    					url: '/pages/navbar/navbar?item=' + item
    				})
    			}
    		}
    	}
    </script>

2.接收的页面 页面路径 /pages/navbar/navbar

<template>
    	<view>
    		接受的信息
    		<view>
    			<text>{ { userObj.name}}</text>
    			<text>{ { userObj.age}}</text>
    			<text>{ { userObj.sex}}</text>
    			<text>{ { userObj.school}}</text>
    		</view>
    	</view>
    </template>
    <script>
    	export default { 
    		data() { 
    			return { 
    				userObj: { }
    			}
    		},
    		onLoad: function(option) { 
    			// decodeURIComponent 解密传过来的对象字符串
    			const item = JSON.parse(decodeURIComponent(option.item));
    			this.userObj = item
    		}
    	}
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 uni-app页面传值传递对象类型的数据

在pages.json 里面的pages注册这两个页面 1.传值页面 <template> <view @click="navBar()">

我就是我/ 2023年06月25日 10:20/ 0 赞/ 7 阅读

相关 uniapp页面之间传值

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

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

相关 uniapp页面传值

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

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

相关小程序页面传值传递对象[Object Object]

版权声明： https://blog.csdn.net/caoyan0829/article/details/79807058 1.先将要传的对象转译一下 ![在这里插入图

ゞ浴缸里的玫瑰/ 2022年11月07日 05:55/ 0 赞/ 194 阅读

相关 spring mvc 页面与页面之间的对象传值

问题如下： controller AA给页面a发送了对象m，在页面a跳转到controller BB，那么contoller BB怎么得到对象m？ <table style

分手后的思念是犯贱/ 2022年08月26日 01:18/ 0 赞/ 214 阅读

相关 Java传参-基本数据类型和引用数据类型作为参数的区别(值传递)

java中的方法可以传递参数，参数的传递方法就是值传递。参数有形参和实参，定义方法时写的参数叫形参，真正调用方法时，传递的参数叫实参。调用方法时，会把实参传递给形参，方

迈不过友情╰/ 2022年06月08日 14:08/ 0 赞/ 295 阅读

相关 uniapp页面参数传递

uniapp页面参数传递简介uniapp传递参数，和获取参数。首先链接传递或者事件传递 1、要传递参数的页面 <table> <tbody

╰半橙微兮°/ 2022年04月25日 07:02/ 0 赞/ 947 阅读

相关 uniapp页面参数传递

uniapp页面参数传递 ![4a9631149e30a9b4cbc600f5a5e3200e.jpg][]admin2019-04-09 【[Uni-App][]】 1

左手的ㄟ右手/ 2022年01月27日 20:38/ 0 赞/ 698 阅读

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

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

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

相关 uniapp navigateTo url路由传参(传递对象)

1、跳转页面 // 详情 myInInfoClick(obj) { uni.navigateTo({ url:'./compone

忘是亡心i/ 2021年07月25日 13:10/ 0 赞/ 1080 阅读