Vant 底部導航組件的實現 tabbar

設計底部導航的功能組件

1. 路由跳轉

2. 選項卡的原理

3. 路由攔截

<template>
  <van-tabbar v-model="active" active-color="#30A3F8">
    <van-tabbar-item 
      v-for="(item,index) in tabbars" 
      :key="index" 
      :to="(item.name)"
    >
      <span>{{item.title}}</span>
      <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首頁",
          normal: require("@/assets/images/shop/icon1_1.png"),
          active: require("@/assets/images/shop/icon1_2.png")
        },
        {
          name: "sort",
          title: "分類",
          normal: require("@/assets/images/shop/icon2_1.png"),
          active: require("@/assets/images/shop/icon2_2.png")
        },
        {
          name: "cart",
          title: "購物車",
          normal: require("@/assets/images/shop/icon3_1.png"),
          active: require("@/assets/images/shop/icon3_2.png")
        },
        {
          name: "mine",
          title: "我的",
          normal: require("@/assets/images/shop/icon4_1.png"),
          active: require("@/assets/images/shop/icon4_2.png")
        }
      ]
    };
  },
  watch: {
    '$route'(to, from) {
      if (to.path == "/shop/home") {
          this.active = 0;
      } else if (to.path == "/shop/sort") {
          this.active = 1;
      } else if (to.path == "/shop/cart") {
          this.active = 2;
      } else if (to.path == "/shop/mine" || to.path == "/shop/myorder" || to.path == "/shop/myorderreturn") {
          this.active = 3;
      }
    }
  },
  created () {
    // console.log(this.$route);
    // if (this.$route.name == "首頁") {
    //     this.active = 0;
    // } else if (this.$route.name == "分類") {
    //     this.active = 1;
    // } else if (this.$route.name == "購物車") {
    //     this.active = 2;
    // } else if (this.$route.name == "我的主頁" || this.$route.name == "我的訂單" || this.$route.name == "退款/售后") {
    //     this.active = 3;
    // }
  },
};
</script>

<style lang="less" scoped>
.van-tabbar {
  border-top: 1px solid #EEE;
  height: 55px;
  .van-tabbar-item__icon img {
    width: 22px;
    height: 22px;
  }
}

.active_tab img {
  width: 22px;
  height: 22px;
}
</style>