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

 

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

渲染数据

 

图片css和渲染图片

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

 

版权声明：本文为zhongyehai原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhongyehai/p/13518445.html