一、项目搭建

1.1 布局分析

登录、Layout 在一级路由显示

Layout 下配置二级路由

1.2 路由配置

路由出口 App.vue

<template>
  <router-view></router-view>
</template>

Layout/index.vue

<template>
  <div class="app_layout">
    <header>header</header>
    <aside>aside</aside>
    <main>main</main>
  </div>
</template>

router/index.js

import Layout from "@/views/Layout/index.vue";
import Login from "@/views/Login/index.vue";


const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    { path: "/", component: Layout, children: [] },
    { path: "/login", name: "login", component: Login },
  ],
});

1.3 Layout 布局

Layout/index.vue

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

<script setup>
import Aside from "./components/Aside/index.vue";
import Header from "./components/Header/index.vue";
</script>

<style scoped>
.app_layout {
  height: 100%;
}
</style>