vue3-08

主页布局

借助 antdv 的 layout 组件，可以实现主页【上】【左】【右】布局

<template>
    <div class="a53">
        <a-layout>
            <a-layout-header></a-layout-header>
            <a-layout>
                <a-layout-sider></a-layout-sider>
                <a-layout-content>
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>
<style scoped>
.a53 {
    height: 100%;
    background-color: rgb(220, 225, 255);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='35' y='10' font-size='14' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3EA53(主页)%3C/text%3E%3C/svg%3E");
    padding: 20px;
    box-sizing: border-box;
}

.ant-layout-header {
    height: 50px;
    background-color: darkseagreen;
}

.ant-layout-sider {
    background-color: lightsalmon;
}

.ant-layout-content {
    background-color: aliceblue;
}

.ant-layout-footer {
    background-color: darkslateblue;
    height: 30px;
}

.ant-layout {
    height: 100%;
}

.ant-layout-has-sider {
    height: calc(100% - 50px);
}
</style>

侧边栏菜单

<template>
  <div class="a53">
    <a-layout>
      <a-layout-header></a-layout-header>
      <a-layout>
        <a-layout-sider>
          <a-menu theme="dark" mode="inline">
            <a-menu-item :key="1">
              <router-link to="/a3/student">菜单1</router-link>
            </a-menu-item>
            <a-menu-item :key="2">
              <router-link to="/a3/teacher">菜单2</router-link>
            </a-menu-item>
            <a-menu-item :key="3">菜单3</a-menu-item>
            <a-sub-menu :key="4" title="菜单4">
              <a-menu-item :key="41">菜单41</a-menu-item>
              <a-menu-item :key="42">菜单42</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

• a-menu-item 与 a-sub-menu 都必须为 key 属性唯一赋值，否则会产生混乱

• router-link 标签用来切换路由，to 是目标路由的路径

• theme 属性定义菜单的主题（默认亮色主题，dark 为暗色主题）

• mode 属性定义子菜单的展示模式（默认弹出，inline 显示在下方）