vue实现简单的tab跳转和跳转详情页

废话不多说，直接上代码：

home页面：
<template>
  <div class="home">
    <div class="header-continer">
      <div class="header-wrapper">
          <Header v-for="(item,index) in headelist "
          :key="index"
          :item="item"
          :index="index"
          @changeindex=getindex
          :corront="corront"
           />
      </div>
    </div>
    <div class="home_sort">
       <div>综合</div>
       <div @click="onSort">价格</div>
       <div>销量</div>  
     </div>
     <div class="shop_list_container">
      <div class="shop-list-item">
         <Shoplist  v-for="(item,index) in show "
         :key="index"
         :item="item"
          />
      </div>
     </div>
  </div>
</template>

<script>
import Header from "../components/Header"
import Shoplist from "../components/Shoplist"
import Axios from "axios"
export default {
 components:{
    Header,
    Shoplist
  },
  data(){
    return{
      headelist:[],
      corront:-1,
      shoplist:[],
      show:[],
      num:0
    }
  },
  methods:{
    getindex(index,item){
      // window.console.log(item)
      if(index===-1){
        this.show=this.shoplist
        // this.corront=index
        // window.console.log(this.show)
      }else if(index===0){
        this.show=[]
        this.shoplist.forEach((ele)=>{
          if(ele.cid===item._id){
            this.show.push(ele)
          }
        })
        this.corront=index
        // window.console.log(this.show)
      }else if(index===1){
        this.show=[]
        this.shoplist.forEach((ele)=>{
          if(ele.cid===item._id){
            this.show.push(ele)
          }
        })
        this.corront=index
        // window.console.log(this.show)
      }else{
        this.show=[]
        this.shoplist.forEach((ele)=>{
          if(ele.cid===item._id){
            this.show.push(ele)
          }
        })
        this.corront=index
      }
    },
    onSort(){
        this.num++
        if(this.num>2){
          this.num=1
          // return
        }
        window.console.log(this.num)
        if(this.num===1){
          var low=function(a,b){
            return a.price-b.price
          }
          this.show=this.show.sort(low)
        }else if(this.num===2) {
          var hight=function(a,b){
            return b.price-a.price
          }
          this.show=this.show.sort(hight)
        }

    }
  },
  mounted(){
    Axios.get("http://localhost:8080/fenlei.json").then((resp)=>{
      // window.console.log(resp.data)
      this.headelist=resp.data.result
      // window.console.log(this.headelist)
    }).catch((error)=>{
      window.console.log(error)
    }),
    Axios.get("http://localhost:8080/list.json").then((resp)=>{
      // window.console.log(resp.data)
      this.shoplist=resp.data.result;
      this.show=resp.data.result
      // window.console.log(this.shoplist)
    }).catch((error)=>{
      window.console.log(error)
    })
  }
}
</script>

<style>
.home_sort{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: start;
}
.home_sort div{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop_list_container{
    width: 100%;
    height: 600px;
    position: fixed;
    top: 104px;
    overflow: scroll;
    /* background: skyblue; */
}
.shop-list-item{
    width: 100%;
    height: 800px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    flex-wrap: wrap;
    /* background: red; */
}
.shop-item{
    width: 48%;
    height: 350px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 5px 0;
}
.image{
    width: 90%;

}
.image img{
    width: 100%;
    height: auto;
} 
.shop-title {
    width: 90%;
}
.item-price{
    width: 90%;
    color: red;
}
</style>

详情页面（detalis）:
<template>
  <div>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="this.$route.params.img" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="this.$route.params.img" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="this.$route.params.img" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>{{this.$route.params.title}}</div>
    <div class="item-price">{{this.$route.params.price | addnum}}</div>
    <div>
      <h3>商品详情</h3>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车"  />
        <van-goods-action-icon icon="shop-o" text="店铺"  />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    addnum(value) {
      var tempprice = parseInt(value).toFixed(2);
      return `￥${tempprice}`;
    }
  }
};
</script>

<style>
img{
    width: 100%;
}
</style>

header页面：
<template>
   <div 
     :class="this.corront===this.index?'header-item-active':'header-item'"
     @click="onClick(item)"
     >
         {{item.title}}
    </div>
</template>

<script>
export default {
    props:{
        item:Object,
        index:Number,
        corront:Number
    },
    methods:{
        onClick(item){
           this.$emit("changeindex",this.index,item)
        }
    }
}
</script>
<style>
.header-continer{
    width: 100%;
    height: 64px;
    /* background: skyblue; */
}
.header-wrapper{
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* background: red; */
}
.header-item{
    /* width: ; */
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around
}
.header-item-active{
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: red;
    border-bottom: 1px solid red;
}
</style>

shoplist页面：
<template>
    <div class="shop-item" @click="onClick">
        <div class="image"> 
            <img :src=item.s_pic alt="" />
        </div>
        <div class="shop-title">
            {{item.title}}
        </div>
        <div class="item-price">
            {{item.price | addnum}}
        </div>
    </div>
</template>

<script>
export default {
    props:{
        item:Object
    },
    mounted(){
        // window.console.log(this.item)
    },
    filters:{
        addnum(value){
            var tempprice=parseInt(value).toFixed(2)
            return `￥${tempprice}`
        }
    },
    methods:{
        onClick(){
            this.$router.push({
                name:"Details",
                params:{
                    img:this.item.s_pic,
                    title:this.item.title,
                    price:this.item.price
                }
            })
        }
    }
}
</script>