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>

第二种

<template>
	<div class="login">
		<!-- 底部导航部分 -->
		<div id="TabBar" class="tab-bar row">
			<div class="cell-3 tab-bar-item" @click="goPage(0)" v-bind:class="{active: actives[0]}">
				<div class="row">
					<i class="iconfont icon-shouye"></i>
				</div>
				<div class="row">
					<span>首页</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(1)" v-bind:class="{active: actives[1]}">
				<div class="row">
					<i class="iconfont icon-dengpao"></i>
				</div>
				<div class="row">
					<span>我的社区</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(2)" v-bind:class="{active: actives[2]}">
				<div class="row">
					<i class="iconfont icon-shangcheng navys"></i>
				</div>
				<div class="row navys">
					<span>商城</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(3)" v-bind:class="{active: actives[3]}">
				<div class="row">
					<i class="iconfont icon-my_icon"></i>
				</div>
				<div class="row">
					<span>我</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				actives: [true, false, false, false],
			}
		},
		mounted() {},
		methods: {
			// tab
			goPage: function(tag) {
				if (tag === 0) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[0] = true;
					this.$router.push("/")
				} else if (tag === 1) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[1] = true;
					if (this.isLogin) {
						this.$router.push("/myCommunity")
					} else {
						this.$toast("请先登录");
						this.$router.push("/login")
					}
				} else if (tag === 2) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[2] = true;
					this.$dialog.alert({
						message: '暂无开放'
					}).then(() => {
						this.goPage(0)
					});
				} else if (tag === 3) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[3] = true;
					if (this.isLogin) {
						if (this.isActive) {
							this.$router.push("/myactiva")
						} else {
							this.$router.push("/my")
						}
					} else {
						this.$toast("请先登录");
						this.$router.push("/login")
					}
				}
				this.$emit('select-item', tag);
			}
		}
	}
</script>
<style scoped>
	/* 底部导航栏 */
	.navys {
		color: #a4a4a4 !important;
	}
	.tab-bar {
		box-shadow: 0 -4px 16px -1px #ebebeb;
		color: #a4a4a4;
		background-color: white;
		height: 1.05rem;
		border: 0 solid rgb(210, 210, 210);
		border-top-width: 0px;
		position: fixed;
		margin: auto;
		bottom: 0;
		width: 100%;

	}

	.tab-bar .cell-3 {
		display: inline-block;
		width: 24%;
		text-align: center;
		padding-top: 0.15rem;
	}

	.tab-bar-item {
		height: 1.05rem;
	}

	.tab-bar .active {
		color: #0a0c56;
	}

	.tab-bar i {
		font-size: 21px;
		padding-bottom: 0.03rem;
		display: inline-block;
		font-weight: 700;
	}
</style>