tingbang/htmldev/dashboard/src/App.vue

<template>
  <div class="af-entry">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <van-tabbar
      class="af-entry-tabbar"
      v-model="activeTab"
      :placeholder="true"
      v-show="$route.meta.isUseVanTabbar"
      @change="onChange">
      <van-tabbar-item
        name="PlaceList"
        icon="wap-home-o">订座
      </van-tabbar-item>
      <van-tabbar-item
        name="PlaceReserve"
        icon="user-o">我的订座
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  },
  data () {
    return {
      activeTab: 'PlaceList'
    }
  },
  watch: {
    '$route.name': {
      handler: function (newVal) {
        this.activeTab = newVal
      },
      immediate: true
    }
  },
  async created () {
    await this.$store.dispatch('common/fetchBarList')
  },
  mounted () {
    const routeName = this.$route.name
    this.activeTab = ['PlaceList', 'PlaceReserve'].findIndex(item => item === routeName) > -1 ? routeName : ''
  },
  methods: {
    onChange (routeName) {
      this.$router.replace({ name: routeName })
    }
  }
}
</script>

<style lang="scss">
@import "./assets/styles/reset";

.clearfix {
  display: inline-block;

  &:after {
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
  }
}

.af-entry {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: #F2F2F2;

  &-tabbar {
    .van-tabbar--fixed {
      box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);
    }
  }
}
</style>