vuerouter实现底部导航栏动态切换图片

最近的整理
最终效果上图

底部导航栏具体页面没做添加编写

html*

 <a href="javascript:;" class="weui-tabbar__item " v-for="(i,index) in tabs" :key="index" :class="{active:index == thatnum}" @click="addClassName(index)">
          <router-link :to="i.url">
            <img v-if="thatnum!=index"  :src="i.img" class="first weui-tabbar__icon">
            <img v-if="thatnum==index"  :src="i.active" class="last first weui-tabbar__icon">
            <p class="weui-tabbar__label">{{i.text}}</p>
          </router-link>
        </a> 

js
图片显示不出来时用require包裹图片

data() {
    return {
      thatnum: 0,
      tabs:[
        {
          text:"首页",
          url:'/login',
          img:require("@/assets/img/index1.png"),
          active:require('@/assets/img/index.png')
        },
        {
          text:"财富",
          url:'/wealth',
          img:require("@/assets/img/wealth1.png"),
          active:require('@/assets/img/wealth.png')
        },
        {
          text:"口碑",
          url:'/Restaurant',
          img:require("@/assets/img/Restaurant1.png"),
          active:require('@/assets/img/Restaurant.png')
        },
        {
          text:"朋友",
          url:'/friend',
          img:require("@/assets/img/friend1.png"),
          active:require('@/assets/img/friend.png')
        },
        {
          text:"我的",
          url:'/mine',
          img:require("@/assets/img/mine1.png"),
          active:require('@/assets/img/mine.png')
          }
      ],
    };
  },
  mounted(){
    this.thatnum=this.tabName
  },
  methods: {
    addClassName: function(index) {
      this.thatnum = index;
    },
  }

CSS

 .nav{
width: 100%;
 height: 55px;
align-items: center;
 display: flex;
 text-align: center;
 position: fixed;
 bottom: 0;
 border-top: 1px solid #cccccc;
 }
 .weui-tabbar__item a{
   width: 100%;
   height:100%;
   flex: 1;
 }
.weui-tabbar__item {
  flex: 1;
 text-decoration: none;
 }
 a{
   text-decoration: none;
 }
 .tabWrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
p{
    color: #cccccc;

    font-size: 14px;
}
.active p{
  color: #1296DB;
}
.weui-tabbar__icon{
  width: 25px;
}