列表带参跳转详情页怎么渲染数据
请问白屏了请问怎么修改代码让列表数据渲染详情页面
箭头所指为目标列表
随便点击一个列表项之后
列表所在页面Home.vue
<template>
<div class="full-page">
<nav-bar></nav-bar>
<div class="content-box">
<!-- 电影类型 -->
<ul class="movie-type">
<li :class="{active:currentIndex==0}" @click="currentIndex=0">热映</li>
<li :class="{active:currentIndex==1}" @click="currentIndex=1">待映</li>
<li :class="{active:currentIndex==2}" @click="currentIndex=2">经典电影</li>
<li>
<span class="iconfont icon-fangdajing icon-6"></span>
</li>
</ul>
<!-- 最爱好评的电影 -->
<div class="praise-movie-box">
<p class="praise-movie-title">最受好评的电影</p>
<ul class="praise-movie-list">
<li class="praise-movie-item" v-for="(item,index) in praiseMovieData">
<div class="praise-movie-img-box">
<img :src="baseURL+item.movie_pc" class="praise-movie-img" alt="">
<p class="praise-movie-score">观众评分:{{item.movie_score}}</p>
</div>
<p class="praise-movie-name">{{item.movie_name}}</p>
</li>
</ul>
</div>
<!-- 电影列表 -->
<!-- 热映 -->
<ul class="ul-movie-list" v-show="currentIndex==0">
<li class="movie-item"
v-for="(item,index) in purchaseMovieData"
v-show="item.isShowing==true"
>
<viewer>
<img :src="baseURL+item.movie_pc" class="movie-img-left" alt="">
</viewer>
<div class="movie-info-center" @click="goDetail(item.id)"><!-- @click="itemClick(item.id)"-->
<div class="movie-name-center">{{item.movie_name}}</div>
<div>观众评分：<span class="movie-score-center">{{item.movie_score}}</span></div>
<div>主演：{{item.role}}</div>
<div>上映时间：{{item.publicTime|dataFilter}}</div>
</div>
<div class="btn-box-right">
<button type="button" class="btn-Presale" v-if="index==0">预售</button>
<button type="button" class="btn-buyticket" v-else>购票</button>
</div>
</li>
</ul>
<!-- 待映 -->
<ul class="ul-movie-list" v-show="currentIndex==1">
<li class="movie-item" v-for="(item,index) in purchaseMovieData" v-show="item.isWaiting==true">
<viewer>
<img :src="baseURL+item.movie_pc" class="movie-img-left" alt="">
</viewer>
<div class="movie-info-center">
<div class="movie-name-center">{{item.movie_name}}</div>
<div>观众评分：<span class="movie-score-center">{{item.movie_score}}</span></div>
<div>主演：{{item.role}}</div>
<div>上映时间：{{item.publicTime|dataFilter}}</div>
</div>
<div class="btn-box-right">
<button type="button" class="btn-Presale" v-if="item.isWaiting==true">预售</button>
<button type="button" class="btn-buyticket" v-else>购票</button>
</div>
</li>
</ul>
<!-- 经典电影 -->
<ul class="ul-movie-list" v-show="currentIndex==2">
<li class="movie-item" v-for="(item,index) in purchaseMovieData" v-show="item.isClassic==true">
<viewer>
<img :src="baseURL+item.movie_pc" class="movie-img-left" alt="">
</viewer>
<div class="movie-info-center">
<div class="movie-name-center">{{item.movie_name}}</div>
<div>观众评分：<span class="movie-score-center">{{item.movie_score}}</span></div>
<div>主演：{{item.role}}</div>
<div>上映时间：{{item.publicTime|dataFilter}}</div>
</div>
<div class="btn-box-right">
<button type="button" class="btn-Presale" v-if="index==0">预售</button>
<button type="button" class="btn-buyticket" v-else>购票</button>
</div>
</li>
</ul>
</div>
<tabBar></tabBar>
</div>
</template>
<script>
import NavBar from "../components/NavBar.vue";
import TabBar from "../components/TabBar.vue";
import praiseMovieData from "../assets/static_data/praiseMovieData.js";
import purchaseMovieData from "../assets/static_data/purchaseMovieData.js";
import moment from 'moment';
export default{
data(){
return{
currentIndex:0,
baseURL: "http://www.softeem.xin:9999",
praiseMovieData:praiseMovieData.data,
purchaseMovieData:purchaseMovieData.data.listData,
}
},
components:{
NavBar:NavBar,
TabBar:TabBar,
},
methods: {
goDetail(id){
this.$router.push({name:'Detail',params:{id}})
}
},
}
</script>
<style lang="scss" scoped>
.full-page{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content-box {
/* 占满弹性盒子剩下的空间 */
flex: 1;
/* 溢出处理 */
overflow: auto;
}
.movie-type {
/* 弹性盒子，里在的元素默认横排 */
display: flex;
border-bottom: 1px solid #E1E1E1;
height: 45px;
font-size: 14px;
color: #333333;
position: relative;
}
.movie-type li {
padding: 0px 15px;
/* 弹性盒子 */
display: flex;
/* 副轴（垂直）居中 */
align-items: center;
}
.movie-type li.active {
font-weight: bold;
font-size: 16px;
color: black;
/* 相对定位 ,这里可以理解为参照物*/
position: relative;
}
/* ::after伪元素选择器，可以在一个元素的内部的最后面追加内容 */
.movie-type li.active::after {
content: "";
display: block;
width: 18px;
height: 3px;
background-color: var(--primaryColor);
/* 子绝父相 */
/* 绝对定位 */
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.praise-movie-box {
padding: 15px;
}
.praise-movie-title {
font-size: 14px;
color: #666666;
}
.praise-movie-list {
margin-top: 5px;
/* 弹性盒子,里面的元素默认横排 */
display: flex;
/* 溢出处理 */
overflow: auto;
}
.praise-movie-item {
width: 85px;
/* 禁止元素被压缩 */
flex-shrink: 0;
}
/* 排除第1个praise-movie-item设置marign-left:5px */
.praise-movie-item:not(:first-child) {
margin-left: 5px;
}
.praise-movie-img-box {
width: 100%;
height: 114px;
/* 相对定位,这里可以理解为参照物 */
position: relative;
}
.praise-movie-name {
font-size: 12px;
font-weight: bold;
padding: 5px 0;
/* 单行溢出省略 */
/* 1.文字不换行 */
white-space: nowrap;
/* 2.溢出隐藏，多出来的部分隐藏掉 */
overflow: hidden;
/* 3.如果是文本被隐藏了，就添加一个省略号 */
text-overflow: ellipsis;
}
.praise-movie-img {
width: 100%;
height: 100%;
}
.praise-movie-score {
font-size: 12px;
color: var(--tagColor);
font-weight: bold;
/* 子绝父相 */
/* 绝对定位 */
position: absolute;
bottom: 1px;
left: 2px;
}
/* 电影列表 */
.ul-movie-list{
padding: 15px;
border-top: 5px solid #E1E1E1;
}
.movie-item{
/* 弹性盒子，里面的元素默认横排 */
display: flex;
}
/* 排除第1个元素设置margin-top:20px */
.movie-item:not(:first-child){
margin-top: 10px;
}
.movie-img-left{
width: 60px;
height: 80px;
}
.movie-info-center{
/* 占满弹性盒子剩下空间 */
flex: 1;
font-size: 12px;
color: #666666;
/* 弹性盒子，里面的元素默认横排 */
display: flex;
/* 更改里面的元素排列方向 */
flex-direction: column;
/* 主轴（垂直）对齐 */
justify-content: space-between;
padding-left: 5px;
}
.movie-name-center{
font-size: 14px;
font-weight: bold;
color: #333333;
}
.movie-score-center{
font-size: 14px;
font-weight: bold;
color: var(--tagColor);
}
.btn-box-right{
width: 60px;
height: 80px;
/* 弹性盒性 */
display: flex;
justify-content: center;
align-items: center;
}
.btn-buyticket{
border: none;
font-size: 12px;
background-color: var(--primaryColor);
color: white;
width: 45px;
height: 19px;
border-radius: 10px;
box-shadow: 0px 2px 4px var(--primaryColor);
}
.btn-Presale{
border: none;
font-size: 12px;
background-color: royalblue;
color: white;
width: 45px;
height: 19px;
border-radius: 10px;
box-shadow: 0px 2px 4px royalblue;
}
.icon-6{
text-align: right;
position: absolute;
right: 10px;
}
</style>
详情页面Detail.vue
<template>
<div class="full-page">
<nav-bar-d></nav-bar-d>
<div class="content-box">
<div class="cinema-background" >
<img src="../assets/img/right.jpg" alt="" class="De-movie-img">
<div class="De-movie-info">
<div class="De-movie-name">
{{filmsInfo.movie_name}}
</div>
<div class="De-movie-score">
8分
</div>
<div class="De-movie-tags">
家庭 剧情
</div>
<div class="De-movie-timelong">
90分钟
</div>
<div class="De-movie-time">
2005-01-01
</div>
</div>
</div>
<div class="special-purchase-box">
<div class="spe-pur-button">
特惠购票
</div>
</div>
<div class="movie-review-box">
年关将至，中年编剧
</div>
</div>
</div>
</template>
<script>
import NavBarD from "../components/NavBarD.vue";
//import purchaseMovieData from "../assets/static_data/purchaseMovieData.js";
export default{
data(){
return{
id:this.$router.params.id,
filmsInfo:{},
}
},
components:{
NavBarD:NavBarD,
},
methods: {
getFilmsInfo() {
this.$http.get('../assets/static_data/purchaseMovieData/' + this.id).then((res) => {
if (res.data.data.listData.id === this.id) {
this.filmsInfo = res.data.data.listData
}
})
}
},
created() {
this.getFilmsInfo()
}
}
</script>
<style lang="scss" scoped>
.full-page{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content-box {
/* 占满弹性盒子剩下的空间 */
flex: 1;
/* 溢出处理 */
overflow: auto;
}
.cinema-background{
height: 160px;
background-color: orangered;
border-top: 1px solid white;
display: flex;
padding-top: 15px;
padding-left: 15px;
}
.special-purchase-box{
height: 70px;
border: 1px solid white;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.spe-pur-button{
color: white;
border-radius: 8px;
background-color: var(--primaryColor);
height: 40px;
width: 95%;
display: flex;
justify-content: center;
align-items: center;
}
.movie-review-box{
border: 1px solid black;
height: 300px;
}
.De-movie-img{
width: 110px;
height: 130px;
object-fit: cover;
}
.De-movie-info{
height: 130px;
margin-left: 10px;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 排除第1个元素设置margin-top:20px */
.De-movie-info:not(:first-child){
}
.De-movie-name{
font-size: 20px;
}
.De-movie-score{
color: var(--tagColor);
}
</style>
router/index.js页面
数据页面
先看代码运行控制台是否报错，然后看是否有返回值再看判断条件
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7776133
- 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转
- 除此之外, 这篇博客: vue-router 路由传参方式/缓存路由/路由跳转中的 home组件显示 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
<template> <div> <h1>Home</h1> <ul class="nav nav-tabs"> <li> <router-link to="/home/message">message</router-link> </li> <li> <router-link to="/home/news">news</router-link> </li> </ul> <router-view></router-view> </div> </template>
- 您还可以看一下 路飞老师的Vue全家桶(vue-router+vuex)课程中的 路由查询参数小节, 巩固相关知识点