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

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

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

渲染数据

图片css和渲染图片

<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>