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

 

获取传递给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 {
        width: 100%;
        height: 50%;
    }
</style>