Contract/src/components/Tabbar.vue

<template>
  <footer class="tab-ctnr">
    <ul class="tab-box">
      <li v-for="(item,index) in items">
        <router-link :to="item.paths">
          <img v-if="$route.path == item.paths" :src="item.imgT">
          <img v-else :src="item.imgF">
          <p :class="{active:$route.path==item.paths}">{{item.name}}</p>
        </router-link>
      </li>
    </ul>
  </footer>
</template>
<script type="text/javascript">
	export default{
    data(){
      return {
        items:[
          {paths: '/home',name:'首页',
            imgT:require('../assets/img/首页-选中.png'),
            imgF:require('../assets/img/首页-未选.png')
          },
          {paths: '/contract',name:'合同',
            imgT:require('../assets/img/合同-选中.png'),
            imgF:require('../assets/img/合同-未选.png')
          },
          {paths: '/linkman',name:'联系人',
            imgT:require('../assets/img/联系人-选中.png'),
            imgF:require('../assets/img/联系人-未选.png')
          },
          {paths: '/mine',name:'我的',
            imgT:require('../assets/img/我-选中.png'),
            imgF:require('../assets/img/我-未选.png')
          },
        ]
      }
    }
  }
</script>
<style scoped>
  .tab-ctnr{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    .tab-box{
      height: 1.332623rem;
      display: flex;
      justify-content: space-around;
      font-family: FZLTHJW--GB1-0;
      font-size: 0;
      p{
        color: #a2a2a2;
        font-size: 22px;/*px*/
      }
      p.active{
        color: #60c0ff;
      }
      img{
        width: 0.861111rem;
        height: 0.861111rem;
      }
    }
  }

  
</style>