vue移动端封装底部导航

 

 

<template>
    <div class="myfooter flex-betweenCenter">
      <router-link tag="div" to='/home'>
        <img class="img" :src="isRouter('/home')?index0:index1"  alt="">
        <span>消息</span>
      </router-link>
      <div>扫一扫</div>
      <router-link tag="div" to='/my'>
        <img class="img" :src="isRouter('/my')?my0:my1"  alt="">
        <span>我的</span>
      </router-link>
    </div>
</template>
<script>
export default{
  data(){
    return{
      index0: require("@/assets/images/mine_check_s.png"),
      index1: require("@/assets/images/mine_check_n.png"),

      my0: require("@/assets/images/order_check_s.png"),
      my1: require("@/assets/images/order_check_n.png"),

    }
  },
  methods:{
    isRouter(str){
      let path=this.$route.path;
      return path.includes(str)
    }
  }
}
</script>

<style scoped>
.myfooter{
  margin: 0 auto;
  height: 49px;
  padding: 0 58px;
  background: #FFFFFF;
  box-shadow: 0px -4px 4px 1px rgba(0, 0, 0, 0.03);
}
.myfooter div{
  display: flex;
  flex-direction: column;
  text-align: center;
}
.img{
  width: 20px;
  height: 20px;
  margin-left: 4px;
}
.router-link-exact-active, .router-link-active{
  color: red;
}
</style>