uniapp页面跳转URL传参大坑

案例

展示电影详情,传递电影的id.从search.vue传递到movie.vue

methods: {
	showMovie(e){
		var trailerid = e.currentTarget.dataset.trailerid;
		// console.log(trailerid);
		uni.navigateTo({
			url: '../movie/movie?trailerId='+trailerid,
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
}

search.vue全部文件

<template>
	<view class="page">
		<view class="search-block">
			<view class="search-ico-wrapper">
				<image src="../../static/icos/search.png" class="search-ico"></image>
			</view>
			<input type="text" value="" placeholder="请输入电影名称" maxlength="10" class="search-text" confirm-type="search" @confirm="searchMe" />
		</view>
		<view class="movie-list page-block">
			<view v-for="movie in resultList" :key="movie.id" class="movie-wrapper">
				<image 
					:src="movie.cover" 
					:data-trailerId="movie.id" 
					@click="showMovie"
					class="poster"></image>
			</view>
			<!-- <view class="movie-wrapper">
				<image src="../../static/poster/civilwar.jpg" class="poster"></image>
			</view> -->
		</view>
		<view class="bottom-tip" v-if="show">
			亲,已经到底了!
		</view>
	</view>
</template>

<script>
	import {DataMixin} from "../../common/DataMixin.js"
	export default {
		mixins:[DataMixin],
		data() {
			return {
				keyWords: '',
				show: false,
				resultList: []
			}
		},
		onLoad() {
			this.resultList = this.list;
		},
		onPullDownRefresh(e) {
			uni.showLoading({
				mask: true
			});
			uni.showNavigationBarLoading();
			this.resultList = this.list;
			this.show = false;
			this.queryByKeyWords();
			uni.stopPullDownRefresh();
			uni.hideLoading();
			uni.hideNavigationBarLoading();
		},
		onReachBottom() {
			uni.showLoading({
				mask: true
			});
			uni.showNavigationBarLoading();
			this.resultList = [...this.list, ...this.appendList];
			this.show = true;
			uni.stopPullDownRefresh();
			uni.hideLoading();
			uni.hideNavigationBarLoading();
		},
		methods: {
			showMovie(e){
				var trailerid = e.currentTarget.dataset.trailerid;
				uni.navigateTo({
					url: `../movie/movie?trailerId=${trailerid}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			queryByKeyWords(){
				var tempList = [...this.list, ...this.appendList];
				this.resultList = [];
				if (this.keyWords) {
					tempList.forEach(movie => {
						if (movie.name.indexOf(this.keyWords) != -1) {
							this.resultList.push(movie)
						}
					})
				} else {
					this.resultList = this.list;
				}
			},
			searchMe(e) {
				this.show = false;
				var value = e.detail.value;
				this.keyWords = value;
				this.queryByKeyWords();
			}
		}
	}
</script>

<style>
	@import url("search.css");
</style>

movie接收参数

<template>
	<view class="page">
		<!-- 视频播放start -->
		<view class="player"><video :src="movieSingle.trailer" :poster="movieSingle.poster" class="movie" controls></video></view>
		<!-- 视频播放end -->
		<!-- 影片基本信息start -->
		<view class="movie-info">
			<image :src="movieSingle.cover" class="cover"></image>
			<view class="movie-desc">
				<view class="title">{{ movieSingle.name }}</view>
				<view class="basic-info">{{ movieSingle.basicInfo }}</view>
				<view class="basic-info">{{ movieSingle.originalName }}</view>
				<view class="basic-info">{{ movieSingle.totalTime }}</view>
				<view class="basic-info">{{ movieSingle.releaseDate }}</view>
				<view class="score-block">
					<view class="big-score">
						<view class="score-words">综合评分:</view>
						<view class="movie-score">{{ movieSingle.score }}</view>
					</view>
					<view class="score-stars">
						<block v-if="movieSingle.score >= 0"><trailer-stars :innerScore="movieSingle.score" showNum="0"></trailer-stars></block>
						<view class="prise-counts">{{ movieSingle.priseCounts }}点赞</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 影片基本信息end -->
	</view>
</template>

<script>
import trailerStars from '../../components/trailerStars/trailerStars.vue';
import { DataMixin } from '../../common/DataMixin.js';
export default {
	name: '',
	mixins: [DataMixin],
	components: {
		trailerStars
	},
	data() {
		return {
			movieSingle: {},
			trailerId: ''
		};
	},
	onLoad(params) {
		this.trailerId = params.trailerId;
		var tempList = [...this.list, ...this.appendList];
		tempList.forEach(movie => {
			if (movie.id == this.trailerId) {
				this.movieSingle = movie;
			}
		});
	},
	methods: {}
};
</script>

<style>
@import url('movie.css');
</style>

详解

1.因为引入了组件trailerStars,此组件依赖onLoad接收的trailerId,然后去查询获取movie的详情.
2.此时trailerStars组件已经加载完毕,但是movie详情还没获取,就会产生movie.score为undefined的情况,此时需要处理

处理

首先只有movieSingle.socre >= 0时才加载组件

<block v-if="movieSingle.socre >= 0"><trailer-stars :innerScore="movieSingle.socre" showNum="0"></trailer-stars></block>

同时,trailerStars加载的时候需要放在mounted中加载

<template>
	<view class="movie-score-wrapper">
		<image v-for="yellow in yelloScore" src="../../static/icos/star-yellow.png" class="star-ico"></image>
		<image v-for="gray in grayScore" src="../../static/icos/star-gray.png" class="star-ico"></image>
		<view class="movie-score" v-if="showNum==1">{{innerScore}}</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "trailerStars",
		props: {
			innerScore: 0, //外部传入的分数
			showNum: 0, //是否显示,1显示,0不显示
		},
		data() {
			return {
				yelloScore: 0,
				grayScore: 0,
			}
		},
		mounted() {
			console.log("this.innerScore=" + this.innerScore)
			var tempScore = 0;
			if (this.innerScore != null && this.innerScore != undefined && this.innerScore != '') {
				tempScore = this.innerScore;
			}
			
			var yelloScore = parseInt(tempScore / 2);
			var grayScore = 5 - yelloScore;
			
			this.yelloScore = yelloScore;
			this.grayScore = grayScore;
		}
	}
</script>

<style>
	.movie-score-wrapper {
		display: flex;
		flex-direction: row;
	}

	.star-ico {
		 20rpx;
		height: 20rpx;
		margin-top: 6rpx;
	}

	.movie-score {
		font-size: 12px;
		color: #808080;
		margin-left: 8rpx;
	}
</style>