yb课堂 前端项目通用底部选项卡 CommonsFooter 《三十六》

学会看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>