Vue+有赞vant 移动端 底部导航点切换

<template>
  <div id="app">
<router-view/>
      <div class="van-hairline--top-bottom change van-tabbar van-tabbar--fixed">
              <div  v-bind:class="cls1" @click="Home()"><--此处需要绑定数据-->
                 <div class="van-tabbar-item__icon">
                     <i class="van-icon van-icon-wap-home"></i>
                  </div>
                  <div class="van-tabbar-item__text">Home</div>
              </div>
               <div v-bind:class="cls2" @click="Shop()"><--此处需要绑定数据-->
                   <div class="van-tabbar-item__icon">
                       <i class="van-icon van-icon-shop"></i>
                   </div>
                   <div class="van-tabbar-item__text">Shop</div>
                   </div>
                   </div>
       </div>
</template>

<script>
export default {
  name: 'App',
  data(){
return{
    cls1:'van-tabbar-item van-tabbar-item--active', //停在当前页面颜色高亮
    cls2:'van-tabbar-item'    //离开颜色变暗
}
  },created(){

  },methods:{
Home(){
   this.cls1='van-tabbar-item van-tabbar-item--active'
   this.cls2='van-tabbar-item'
  this.$router.push("/")
  },Shop(){
   this.cls2='van-tabbar-item van-tabbar-item--active'
   this.cls1='van-tabbar-item'
  this.$router.push("/showGoods")
}
  }
}
</script>

<style>
element.style {
z-index: 1;
height: 1.5rem;
}
.van-hairline--top-bottom::after {
border-width: 0.013333rem 0;
}
[class*=van-hairline]::after {
content: ' ';
position: absolute;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: scale(.5);
transform: scale(.5);
border: 0 solid #eee;
}
[class*=van-hairline] {
position: relative;
}
.van-tabbar--fixed {
left: 0;
bottom: 0;
position: fixed;
font-size: 0.4rem;
}
.van-tabbar {
width: 100%;
height: 1.3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #fff;
}

.van-icon-wap-home::before {
content: "\F05E";
font-size: 0.5rem;
}
.van-icon::before {
display: inline-block;
}
.van-tabbar-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 1;
font-size: 0.16rem;
color: #666;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.van-tabbar-item--active {
color: #1989fa;
 }
.van-tabbar-item__icon {
font-size: 0.24rem;
position: relative;
margin-bottom: 0.066667rem;
}
.van-icon-shop::before {
content: "\F053";
font-size: 0.5rem;
}
 .van-icon::before {
display: inline-block;
}
</style>