04、搭建 Layout

1、了解 Layout

对于上一章节的页面划分了解，在行业中有一种通俗的叫法，叫 Layout 布局，因为我们切换页面的时候只有主要内容区切换了，并不是整个页面刷新，这里需要注意。

2、Layout

1、搭建 Layout 在 src 目录下新建 Layout 文件夹

2、在 Layout 文件夹中新建 index.vue、Menu 文件夹和 index.vue、Header 文件夹和 index.vue

Layout文件

3、写入内容

Menu 下 index.vue 文件

<template>
  <div>menu</div>
</template>

Header 下 index.vue 文件

<template>
  <div>header</div>
</template>

Layout 下 index.vue 文件

<template>
  <div>
    <Header></Header>
    <Menu></Menu>
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
import Header from "./Header/index.vue";
import Menu from "./Menu/index.vue";
</script>

4、修改路由文件

import { createRouter, createWebHistory } from "vue-router";
import Layout from "../Layout/index.vue";

const routes = [{
        path: "/",
        name: "/",
        component: Layout,
        children: [
            {
                path: "/",
                name: "/",
                component: () => import('../views/index.vue'),
            }
        ]
    }]


const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

以上步骤做完之后就可以在页面中看到以下内容

Layout文件

3、美化 Layout

1、使用 element-plus 布局容器

在线链接

将 Layout 下的 index.vue 文件修改为

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <Menu></Menu>
      </el-aside>
      <el-container>
        <el-header>
          <Header></Header>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div></div>
</template>

<script lang="ts" setup>
import Header from "./Header/index.vue";
import Menu from "./Menu/index.vue";
</script>
<style scoped lang="scss"></style>

为不同文件添加不同的背景色就可以看出来大致的区别了，比较简单不在概述