如何将一个页面的数据以数组的形式传递到另外一个页面

方法一:列表渲染的情况下:通过json.stringify将数组转化成对象

 

​
<template>
	<view>
		<view v-for="(item,index) in box" :key="index" class="box" @click="viper(index)">
           <view class="box1">{{item.name}}</view>
           <view class="box1">{{item.sex}}</view>
           <view class="box1">{{item.num}}</view>
           <view class="box1">{{item.score}}</view>
		</view>
		
	</view>

</template>

<script>
	export default{
		data(){
			return{
				box:[
					{
					  name:'1',
					  sex:'男',
					  num:'12',
					  score:'90'
					},
					{
					  name:'2',
					  sex:'男',
					  num:'12',
					  score:'91'
					},
					{
					  name:'3',
					  sex:'女',
					  num:'12',
					  score:'92'
					},
					{
					  name:'4',
					  sex:'男',
					  num:'15',
					  score:'99'
					},
					
				]
			}
		},
		methods:{
			viper(index){
				uni.navigateTo({
					url:'/pages/将页面的数据传输到另外一个页面/B页面?box=' + JSON.stringify(this.box[index])
				})
				console.log(this.box[index])
			}
		}
	}
</script>

<style>
	.box{
		width: 100%;
		height: 350rpx;
		background-color: aqua;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.box1{
		width: 100rpx;
		height: 100rpx;
		
	}
</style>

​

B页面:通过json.parse来获取对象

<template>
	<view>
		<view v-for="(item,index) in boxs" :key="index" class="box" >
           <view class="box1">{{boxs.name}}</view>
           <view class="box1">{{boxs.num}}</view>
           <view class="box1">{{boxs.sex}}</view>
           <view class="box1">{{boxs.score}}</view>
		</view>
		
	</view>

</template>

<script>
	export default{
		data(){
			return{
				boxs:[
					
				],
			}
		},
		onLoad(option) {
			this.boxs = JSON.parse(option.box)
			console.log('this.boxs', this.boxs)
		},
		methods:{
			
		}
	}
</script>

<style>
	.box{
		width: 100%;
		height: 350rpx;
		background-color: aqua;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.box1{
		width: 100rpx;
		height: 100rpx;
		background-color: beige;
		
	}
</style>