图示

步骤1：获取列表数据

    mounted(){
        // console.log(this.$route.query)
        let cid=this.$route.query.cid
        let promise1=this.axios({
            url:'/goods/search',
            method:'GET',
            params:{
                cid:cid
            }
        })
        promise1.then((res)=>{
            // console.log(res)
            this.goods=res.data.message.goods
        })
    }

步骤2：渲染产品列表

        <div class="navArea">
            <div>综合</div>
            <div>销量</div>
            <div>价格</div>
        </div>
        <!-- 产品展示区 -->
        <div class="goodsArea">
            <div class="everyRow clearFix" v-for="(item,index) in goods" :key="index" @click="goDetail(index)">
                <div class="everyLeft">
                    <img :src="item.goods_small_logo" alt="">
                </div>
                <div class="everyRight">
                    <p>{{item.goods_name}}</p>
                    <p class="goodsPrice">￥ {{item.goods_price}}</p>
                </div>
            </div>
        </div>

步骤3:跳转产品详情页

        goDetail(index){
            // console.log(index)
            // console.log(this.goods[index].goods_id )
            let goods_id=this.goods[index].goods_id
            this.$router.push({
                path:'/detail',
                query:{
                    goods_id:goods_id
                }
            })
        }