uniapp页面路由传参

最近做的项目碰到页面传参的问题，看文档办法觉得很麻烦，就试着用路由传参，效果如下

 

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="">
			<button type="default" @tap="go('one')">我要到页面一</button>
			<!-- //括号内的参数要用单引号 ，在方法内带参数，-->
		</view>
		<view class="">
			<button type="default" @tap="go('tow')">我要到页面二</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
        go(msg){uni.navigateTo({
        	url:'./select?data='+msg+''
        })
			// 将形参拼接带地址上,用？链接参数名data再加上形参msg
		}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

<template>
	<view class="">
		<view class="">
			<button type="default" @tap="to('red')">我要红色</button>
			<!-- //括号内的参数要用单引号 ，在方法内带参数，-->
		</view>
		<view class="">
			<button type="default" @tap="to('blue')">我要蓝色</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				msg:null,
				// 定义一个变量用于接受上个页面传来的参数
			}
		},
		onLoad:function select(msg){
			this.msg=msg.data
			console.log(this.msg)
		},
	   // onLoad生命周期函数,加载完页面后执行方法把上个页面传来的参数保存到变量里
		methods:{
			to(col){
				uni.navigateTo({
					url:'./'+this.msg+'?data='+col+''
				})
				// 把上个页面传来的参数作为字符串拼接到地址上,再加上本页面要传的参数
			}
		}
	}
</script>

<style>
</style>

<template>
	<view :class="this.msg">
		我是页面一
	</view>
</template>

<script>
	export default{
		data(){
			return{
				msg:null
			}
		},
		onLoad:function one(col){
			this.msg=col.data
		},
		
		
	
	}
</script>

<style>
	.red{
		background-color: red;
	}
	.blue{
		background-color: blue;
	}
	
</style>

<template>
	<view :class="this.msg">
		我是页面二
	</view>
</template>

<script>
	export default{
		data(){
			return{
				msg:null
			}
		},
		onLoad:function one(col){
			this.msg=col.data
		},
	}
</script>

<style>
	.red{
		background-color: red;
	}
	.blue{
		background-color: blue;
	}
</style>

小程序舒尔特汉字方格源码 ：

小程序舒尔特方格源代码_我爱的昵称为什么都存在的博客-CSDN博客小程序舒尔特方格源代码，使用uniapp编写https://blog.csdn.net/weixin_50501118/article/details/125075453