hair/src/views/coffee/index.vue

<template>
  <div class="skeleton_coffee">
    <router-view class="main_coffee" />
    <van-tabbar active-color="#ee0a24" v-model="active">
      <van-tabbar-item name="Drinks" icon="home-o" url="#/coffee">点餐</van-tabbar-item>
      <van-tabbar-item name="Orders" icon="orders-o" url="#/coffee/orders">
        订单
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar as vanTabbar, TabbarItem as vanTabbarItem } from "vant";
import "vant/lib/tabbar/style/index";
import "vant/lib/tabbar-item/style/index";

export default {
  name: "Apply",
  data() {
    return {
      active: 'Drinks',
    };
  },
  mounted() {
    this.active = this.$route.name;
  },
  computed: {},
  methods: {},
  beforeUnmount: function () {},
  components: {
    vanTabbar,
    vanTabbarItem,
  },
};
</script>

<style>
.skeleton_coffee {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
.main_coffee {
  width: 100vw;
  height: calc(100% - 50px);
}
</style>