vue,一路走来（17）--底部tabbar切换

<router-link></router-link>存在router-link-active属性，那么底部tabbar切换就简单多了。不会再出现刷新回到第一个的bug。

<div class="tabbar">
    <footer class="footer">
          <router-link to='/Wechat' tag='li' class="footer__li--1"></router-link>
          <router-link to='/Message' tag='li' class="footer__li--2"></router-link>
          <router-link to='/Explore' tag='li' class="footer__li--3"></router-link>
          <router-link to='/News' tag='li' class="footer__li--4"></router-link>
      </footer>
    <div style="height:50px;"></div>
  </div>

<style lang='less'>
*{margin:0;padding:0;}
li,ol,ul{list-style: none;}
.tabbar {
    .footer {
        width:100%;
        position: absolute;
        left:0;
        bottom:0;
        border-top:1px solid #ddd;
        &__li--1{
            width: 25%;
            height:50px;
            background:url('/static/home.png') center no-repeat;
            background-size: 40%;
            float: left;
            &.router-link-active {
                  background:url('/static/home-active.png') center no-repeat;
                   background-size: 40%; 
                }
        }
        &__li--2{
            width: 25%;
            height:50px;
            background:url('/static/information.png') center no-repeat;
            background-size: 40%;
            float: left;
            &.router-link-active {
                      background:url('/static/information-active.png') center no-repeat;
                       background-size: 40%;
            }
        }
        &__li--3{
            width: 25%;
            height:50px;
            background:url('/static/write.png') center no-repeat;
            background-size: 40%;
            float: left;
            &.router-link-active {
                      background:url('/static/write-active.png')center no-repeat;
                       background-size: 40%;  
            }
        }
        &__li--4{
            width: 25%;
            height:50px;
            background:url('/static/me.png') center no-repeat;
            background-size: 40%;
            float: left;
            &.router-link-active {
                      background:url('/static/me-active.png') center no-repeat;
                       background-size: 40%; 
            }
        }
    }
}
</style>

 

转载于:https://www.cnblogs.com/juewuzhe/p/8303466.html