Vue商城项目（篇2）分类页面实现_vue2首页商品分类左侧

效果展示

步骤1：获取分类信息

        // 获取分类
        let promise1=this.axios.get('/categories')
        promise1.then((res)=>{
            console.log(res)
            this.carName=res.data.message
        })
1
2
3
4
5
6

渲染分类标题在页面左侧

            <div class="classifyLeft">
                <ul >
                    <li v-for="(item,index) in carName" :key="index"  @click="showContent(index)">
                        {{item.cat_name}}
                    </li>
                </ul>
            </div>
1
2
3
4
5
6
7

点击标题获取分类的详细产品类目

        showContent(index){
            // console.log(index)
            this.nowProduct=this.carName[index].children
            console.log(this.nowProduct)
        }
1
2
3
4
5

点击后显示相关商品类名

            <div class="classifyRight">
                <div class="everyClassify" v-for="item in nowProduct" :key="item.cat_name">
                    <h3>{{item.cat_name}}</h3>
                    <div class="productClassify">
                    <div class="everyProduct"  v-for="product in item.children" :key="product.cat_id">
                        <img :src="product.cat_icon" alt="">
                        <p>{{product.cat_name}}</p>
                    </div>
                    </div>
                </div>
            </div>
1
2
3
4
5
6
7
8
9
10
11

点击类名小图标进行商品列表页面

        // 获取商品列表 goods/search
        getList(i,index){
            // console.log(i,index)
            // console.log(this.nowProduct[i].children[index])
            let cid=this.nowProduct[i].children[index].cat_id
            console.log(cid)
            this.$router.push({
                path:'/product',
                query:{
                    cid:cid
                }
            })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

在跳转后端页面打印相关参数

 console.log(this.$route.query)
1