vue五十九:电影院售票项目案例之详情页面

实现点击电影信息跳转到详情页面

vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面

获取传递给detail组件的参数,去请求接口获取数据

vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面渲染数据

vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面

图片css和渲染图片

vue五十九:电影院售票项目案例之详情页面vue五十九:电影院售票项目案例之详情页面

vue五十九:电影院售票项目案例之详情页面

<template>
<div v-if="filminfo">
<img :src="filminfo.poster" class="poster">
<h2>{{ filminfo.name }}</h2>
</div>
</template>

<script>
import axios from 'axios'

export default {
data() {
return {
filminfo: []
}
},
mounted() {
// console.log('获取到的参数: ', this.$route.params.myId)
axios({
url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.myId}&k=1820854`,
headers: {
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1597564345482951892566017"}',
'X-Host': 'mall.film-ticket.film.info'
}
}).then(res => {
console.log(res.data)
this.filminfo = res.data.data.film
})
},
}
</script>

<style lang="scss" scoped>
.poster {
100%;
height: 50%;
}
</style>