移动端vue项目底部导航可以切换icon自定义图标

移动端vue项目中经常用的底部导航，可以切换icon自定义图标，也可换成img切换图片

<template>
  <div class="footbar">
    <router-link to='/home' tag='div'>
         <span>
           <i :class="this.$route.path=='/home'?'iconfont icon-shouye1':'iconfont icon-shouye2'"></i>
         </span>
      <span>首页</span>
    </router-link>
    <router-link to='/taopai' tag='div'>
         <span>
           <i :class="this.$route.path=='/taopai'?'iconfont icon-dingnai1':'iconfont icon-dingnai'"></i>
         </span>
      <span>掏牌</span>
    </router-link>
    <router-link to='/paiyouhui' tag='div'>
         <span>
           <i :class="this.$route.path=='/paiyouhui'?'iconfont icon-dingnai1':'iconfont icon-dingnai'"></i>
         </span>
      <span>牌友汇</span>
    </router-link>
    <router-link to='/plan' tag='div'>
         <span>
           <i :class="this.$route.path=='/plan'?'iconfont icon-dingnai1':'iconfont icon-dingnai'"></i>
         </span>
      <span>策划</span>
    </router-link>

    <router-link to='/my' tag='div'>
         <span>
           <i :class="this.$route.path=='/my'?'iconfont icon-dingnai1':'iconfont icon-dingnai'"></i>
         </span>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name:'footbar',
    data() {
      return {

      }
    },
    mounted(){
    }
  }
</script>

<style scoped>
  .footbar{
    width: 100%;
    height: 2.613333rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    background: white;
    border-top: 1px solid #eeeeee;
    color: #102099;
  }
  .footbar span{
    display: block;
    font-size: .64rem;
  }
  .footbar div{
    flex: 1;
    text-align: center;
  }

  .footbar .router-link-exact-active{
    color: #FABE00;
  }
  .router-link-active{
    color: #FABE00;
  }
  .footbar .active{
    color: #FABE00;
  }

</style>