uniApp路由动态传值

目录

一、案例展示

二、知识点补充

2.1、发送参数(list页面)

2.2、接收参数(details页面)

---

---

一、案例展示

这个案例是从新闻列表跳转到对应详情页面，涉及到动态路由传值、页面跳转、网络请求等知识点。

效果展示：

首先：list页面代码

<template>
	<view class="out">
		<view class="row" v-for="item in listArr" :key="item.id" @click="ClickDetails(item.id)">
			<view class="title">
				title:   {{item.title}}
			</view>
			<view class="content">
				{{item.body}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr:[]
			};
		},
		methods:{
			// 获取网络数据
			getDate(){
				uni.request({
					url:"http://jsonplaceholder.typicode.com/posts",
					success:res=>{
						console.log(res,'2222');
						this.listArr=res.data
					}
				})
			},
			// 跳转到详情页
			ClickDetails(e){
				uni.navigateTo({
					url:"/pages/details/details?id="+e//别忘记给pages前面加/
				})
			}
		},
		onLoad() {
			this.getDate();
		}
	}
</script>

<style lang="scss" scoped>
.out{
	padding :50rpx 30rpx;
	.row{
		padding:20rpx 0;
		border-bottom: 1px dotted red;
		.title{
			font-size: 40rpx;
			padding-bottom: 15rpx;
			color:blue
		}
		.content{
			font-size: 28rpx;
		}
	}
}
</style>

其次，新闻详情details页面

<template>
	<view>
	<!-- 路由动态传值从列表跳转到详情 -->
	<view class="detail">
		<view class="title">
			详情标题：{{objData.title}}
		</view>
		<view class="conent">
			{{objData.body}}
		</view>
	</view>
	<!-- 动态展示每条详情下的评论 -->
	<view class="comments">
		<view class="text">
			评论
		</view>
		<view class="row"  v-for="item in comments" :key="item.id">
			<view class="top">
				<view class="name">
					{{item.name}}
				</view>
				<view class="email">
					{{item.email}}
				</view>
			</view>
			<view class="body">
				{{item.body}}
			</view>
		</view>
	</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				objData:{},
				id:1,
				comments:[]
			};
		},
		// 在onLoad里面去接收navigateTo传递过来的参数
		onLoad(e) {
			console.log("传过来的值",e);//{id: '2'}
			this.id=e.id
			this.getDate();
			this.getComments();
		},
		methods:{
			getDate(){
				uni.showLoading({
					title:"数据加载中...",
					mask:true//加载过程中不许进行其他进程
				})
				uni.request({
					url:"http://jsonplaceholder.typicode.com/posts/"+this.id,//参数拼接:第一种方式
					success:res=>{
						console.log(res);
						this.objData=res.data
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			getComments(){
				uni.request({
					url:`http://jsonplaceholder.typicode.com/posts/${this.id}/comments`,//参数拼接:第二种方式
					success:res=>{
						console.log(res);
						this.comments=res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	padding: 30rpx;
	.title{
		font-size: 46rpx;
		color:blue;
		padding-bottom: 20rpx;
	}
	.conent{
		font-size: 30rpx;
		color:#666;
		padding-bottom: 60rpx;
	}
}
.comments{
	padding: 30rpx;
	background-color: #f4f4f4;
	.text{
		font-size: 46rpx;
		margin-bottom: 30rpx;
	}
	.row{
		border-bottom: 1px solid yellow;
		padding: 20rpx 0;
		.top{
			display: flex;
			justify-content: space-between;
			font-size: 22rpx;
			color:#999;
			padding-bottom: 15rpx;
		}
		.body{
			font-size: 28rpx;
			color:#555;
		}
	}
}
</style>

二、知识点补充

2.1、发送参数(list页面)

// 跳转到详情页
            ClickDetails(e){
                uni.navigateTo({
                    url:"/pages/details/details?id="+e//别忘记给pages前面加/
                })
            }

2.2、接收参数(details页面)

在onLoad里面去接收navigateTo传递过来的参数

        onLoad(e) {
            console.log("传过来的值",e);//{id: '2'}
            this.id=e.id
            this.getDate();
            this.getComments();
        },

在methods里面进行网络请求

uni.request({
url:"http://jsonplaceholder.typicode.com/posts/"+this.id,//参数拼接:第一种方式
                    success:res=>{
                        console.log(res);
                        this.objData=res.data
                    },
                    complete: () => {
                        uni.hideLoading()
                    }
                })

字符串拼接法：

uni.request({
 url:`http://jsonplaceholder.typicode.com/posts/${this.id}/comments`,//参数拼接:第二种方式
                    success:res=>{
                        console.log(res);
                        this.comments=res.data
                    }
                })