在做移動端應用的時候，底部導航tabbar是必不可少的。
在這裡，我用的是vue移動端的ui框架：ydui。長得想當的好看，我很喜歡。

文件中是這麼寫的：

<template>
    <yd-tabbar>
        <yd-tabbar-item title="首頁" link="#">
            <yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item
 
 title="購物車" link="#">
            <yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="個人中心" link="#">
            <yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item
 
>
        <yd-tabbar-item title="圖片" link="#">
            <img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
        </yd-tabbar-item>
    </yd-tabbar>
</template>

這裡面，可以用icon，也可以用圖片。當用到圖片的時候，可能切換tabbar的啟用樣式就要自己來完成了。我自己就寫了一個想當簡單的程式碼。

我自己的tabbar檔案：

<template
 
>
  <yd-tabbar class="tabbars">
    <yd-tabbar-item :title="item.title" :link="item.linkTo" v-for="(item,index) in tabbar" :key="index" :active="item.active" active-color="#ff524f">
      <img slot="icon" :src="item.activeImg" v-if="item.active">
      <img slot="icon" :src="item.normalImg" v-else>
    </yd-tabbar-item>
  </yd-tabbar>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      tabbar: [
        {
          title: "參與挑戰",
          normalImg: "./static/images/[email protected]",
          activeImg: "./static/images/[email protected]",
          linkTo: "/join",
          active: true
        },
        {
          title: "排行榜",
          normalImg: "./static/images/[email protected]",
          activeImg: "./static/images/[email protected]",
          linkTo: "/rank",
          active: false
        },
        {
          title: "邀請好友",
          normalImg: "./static/images/[email protected]",
          activeImg: "./static/images/[email protected]",
          linkTo: "/invite",
          active: false
        },
        {
          title: "個人中心",
          normalImg: "./static/images/[email protected]",
          activeImg: "./static/images/[email protected]",
          linkTo: "/mine",
          active: false
        }
      ]
    };
  },
  watch: {
    //根據路由變化來改變樣式
    $route: {
      handler: function(val, oldVal) {
      //得到新的地址和老的地址，得到新的地址時，找到data中的tabbar資料，然後將啟用狀態設定為true，然後再根據程式碼中的v-if來顯示就行了
        var tabbar = this.tabbar;
        for (var i = 0; i < tabbar.length; i++) {
          if (tabbar[i].linkTo == path) {
            tabbar[i].active = true;
          } else {
            tabbar[i].active = false;
          }
        }
        this.tabbar = tabbar;
      },
      // 深度觀察監聽
      deep: true
    }
  },
};
</script>
<style>
.tabbars{
  height: 50px !important;
}
</style>

我個人覺得我這個方法還是比較簡單易懂的，不知道還有沒有更簡單的方法