vue的底部tab切换 以及图片的变化

<template>
<div class="footbar">
     <router-link to='/' tag='div'>
         <span>
           <img :src="this.$route.path=='路径'?'选中的图片':'未选中的图片'" alt="">
         </span>
          <span>资产</span>
     </router-link>
  	 <router-link to='/路径' tag='div'>
       	 <span>
	 		<img :src="this.$route.path=='路径'?'选中的图片':'未选中的图片'" alt="">
         </span>
         <span>商城</span>
     </router-link>
     <router-link to='/路径' tag='div'>
       	 <span>
	 		<img :src="this.$route.path=='路径'?'选中的图片':'未选中的图片'" alt="">
         </span>
         <span>交易</span>
     </router-link>
     <router-link to='/路径' tag='div'>
       	 <span>
	 		<img :src="this.$route.path=='路径'?'选中的图片':'未选中的图片'" alt="">
         </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: #999999;
}
.footbar span{
    display: block;
    font-size: .64rem;
}
.footbar div{
    flex: 1;
    text-align: center;
}
.footbar img{
    height: 1.066667rem;
}
.footbar .router-link-exact-active{
    color: #2F83C3;
}
.footbar .active{
    color: #2F83C3;
}
</style>