vue底部导航组件

<div class="footer">
    <ul class="flex width-full">
        <li class="footer-item" @click="switchTo('/index')">
        <img :src="'/index' === $route.path ? imgList[0].selected : imgList[0].normal">
            <p :class="{activeColor:'/index' === $route.path}">首页</p>
    </li>
        <li class="footer-item" @click="switchTo('/find')">
        <img :src="'/find' === $route.path ? imgList[1].selected : imgList[1].normal">
             <p :class="{activeColor:'/find' === $route.path}">发现</p>
    </li>
    <li class="footer-item" @click="switchTo('/user')">
         <img :src="'/user' === $route.path ? imgList[2].selected : imgList[2].normal">
              <p :class="{activeColor:'/user' === $route.path}">我的</p>
    </li>
    </ul>
</div>         


data(){
    return{
        imgList:[
         {normal:'static/images/footer/index.png',selected:'static/images/footer/index_active.png'},
          {normal:'static/images/footer/find.png',selected:'static/images/footer/find_active.png'},
          {normal:'static/images/footer/user.png',selected:'static/images/footer/user_active.png'},
        ]
    }
},         


methods:{
      switchTo(path){
        console.log(this.$router);
        this.$router.replace(path);
      }
},    

.footer{
    100%;
    height:0.98rem;
    background-color:#fff;
    position:fixed;
    left:0;
    bottom:0;
    z-index:999;
    .footer-item{
      text-align:center;
      font-size:0.24rem;
      color:#666;
      img{
        margin-top: 0.1rem;
        0.48rem;
        height: 0.48rem;
      }
      .activeColor{
        color:#ff6600;
      }
    }
  }