學會看cube-UI文件，並掌握cube-tab-bar開發

前端需求分析

• 底部導航
• 首頁Banner
• 首頁視訊列表
• 視訊詳情模組
• 註冊模組
• 登陸模組
• 個人資訊模組
• 下單模組
• 訂單列表模組

文件地址:https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

template開發

　　在components下建立CommonFooter.vue

<template>
  <div class="tab">
    <cube-tab-bar v-model="selectedLabelSlots" @click="changHandler">
      <cube-tab
        v
 
-for="(item) in tabs"
        :icon="item.icon"
        :label="item.label"
        :key="item.path"
        :value="item.path"
      ></cube-tab>
    </cube-tab-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedLabelSlots: "/",
      tabs: [
        {
          label: 
 
"首頁",
          icon: "cubeic-home",
          path: "/"
        },
        {
          label: "我的訂單",
          icon: "cubeic-like",
          path: "/order"
        },
        {
          label: "個人中心",
          icon: "cubeic-person",
          path: "/personal"
        }
      ]
    };
  }
};
</script>

vue-router常見API

• router.path：獲取當前的路由
• router.go(n)：這個方法的引數是一個整數，表示在history記錄中向前或者後退多少步，類似window.history.go(n)方法
• router.push(path)：導航到不同的path路徑，這個方法會向history棧新增一個新的記錄，所以當前使用者點選瀏覽器後退按鈕時，則回到之前的URL

完整CommonFooter.vue

<template>
  <div class="tab">
    <cube-tab-bar v-model="selectedLabelSlots" @click="changHandler">
      <cube-tab
        v-for="(item) in tabs"
        :icon="item.icon"
        :label="item.label"
        :key="item.path"
        :value="item.path"
      ></cube-tab>
    </cube-tab-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedLabelSlots: "/",
      tabs: [
        {
          label: "首頁",
          icon: "cubeic-home",
          path: "/"
        },
        {
          label: "我的訂單",
          icon: "cubeic-like",
          path: "/order"
        },
        {
          label: "個人中心",
          icon: "cubeic-person",
          path: "/personal"
        }
      ]
    };
  },
  methods: {
    changHandler(path) {
      //this.this.$route.path：當前路徑
      if (path !== this.this.$route.path) {
        this.$routerouter.push(path);
      }
    }
  },
  created() {
    //預設路由選擇器，比如重新整理頁面，需要重新進到當前路由
    this.selectedLabelSlots = this.this.$route.path;
  }
};
</script>
<!--SCSS是⼀種CSS預處理語⾔, scoped 是指這個scss樣式 只作⽤於當前元件-->
<style lang="scss" scoped>
.tab {
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
}
.cube-tab_active {
  color: #3bb149;
}
</style>