卡片的点击事件通过点击进行路由传参

卡片的点击事件通过点击进行路由传参_第1张图片
卡片的点击事件通过点击进行路由传参_第2张图片

下面是详情页 通过 接收

<template>
    <div class="detail">
        <img :src="row.imgUrl">

        <van-icon name="arrow-left" @click="back" />
    </div>
</template>

<script>
export default {
    created() {
        let id = Number(this.$route.query.id);
        this.foodList.forEach(v => {
            v.foods.forEach(v2 => {
                if (v2.id === id) {
                    this.row = v2;
                }
            })
        })
    },

    data() {
        return {
            row: null,
        }
    },

    methods: {
        back() {
            this.$router.back();
        }
    },

    computed: {
        foodList() {
            return this.$store.state.foodList;
        }
    }
}
</script>

<style lang="less" scoped>
.detail {
    img {
        width: 100%;
    }
}

.van-icon-arrow-left {
    position: absolute;
    left: 10px;
    top: 10px;

    color: #fff;
    font-size: 40px;
}
</style>

你可能感兴趣的:(javascript,前端,开发语言)