详解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 {
width: 20rpx;
height: 20rpx;
margin-top: 6rpx;
}

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

来源：https://www.cnblogs.com/eternityz/p/12270011.html