training-wx/src/layout/index.vue

<template>
  <div class="layout-container">
    <!-- 子路由出口 -->
    <router-view />

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" active-color="#000" inactive-color="#D9DEE4" >
      <van-tabbar-item
        v-for="item in tabbar"
        :key="item.path"
        :icon="item.icon"
        :to="item.path"
      >{{ item.text }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  name: 'Layout',
  data() {
    return {
      active: 0,
      tabbar: [
        {
          path: '/Course',
          text: '培训通知',
          icon: 'home-o'
        },
        {
          path: '/StrongPhoto',
          text: '精彩集锦',
          icon: 'search'
        },
        {
          path: '/UserCenter',
          text: '个人中心',
          icon: 'volume-o'
        }
      ]
    }
  },
  created() {
    this.tabbar.map((item, idx) => {
      if (item.path === this.$route.path) {
        this.active = idx
      }
    })
  },
  methods: {
    goto(path) {
      this.$router.push(path)
    }
  },
  components: {}
}
</script>
<style lang="scss" scoped>
</style>