<template>
  <div id="box">
    <!-- home页面作为我们所有组件的父组件，可以用其他单词来进行命名 -->


    <!-- 可以看出这里引入了一个组件，这里起到示例作用
         如果有多个页面需要用到当前模块，我们可以封装
         一个组件，在有需求的页面里按需载入，起到组件
         复用的效果 
      -->

    <!-- 头部 -->
    <Header></Header>
    
    <!-- 主体 -->
    <div class="content">
      <router-view></router-view>
    </div>

    <!-- 底部tab -->
    <div>
        <!-- 载入vant的tabbar路由模式，通过路由跳转页面 -->
        <!-- 这里van-tabbar-item里的to属性跟 router-link里的to属性效果相同 -->
        <!-- 通过我们的路由路径进行跳转 -->
      <van-tabbar route>
        <van-tabbar-item to="/home/homepage" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/home/menu" icon="qr-invalid">菜单</van-tabbar-item>
        <van-tabbar-item to="/home/shoppingCart" icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item to="/home/my" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
//这里引入Header组件
import Header from "../components/Header/Header.vue";
export default {
  //这里注册Header组件
  components: {
    Header,
  },
};
</script>

<style scoped>
#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;
}
</style>