布局建立

依据Element UI 中的Container 布局容器-常见页面布局，咱们仿制包含Aside、Header、Main三个部分的布局，仿制到 HomeView.vue 的布局中，即：

然后咱们需要修改款式，右键查看布局就能看到布局的 class，经过 class 名添加款式即可

<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4"><img src="../assets/logo.png" class="logo"/></el-col>
          <el-col :span="16"><h2>后台管理体系</h2></el-col>
          <el-col :span="4"><span class="quit-login">退出登录</span></el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>产品列表</span>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
  name: 'HomeView',
  components: {},
});
</script>
<style lang="scss" scoped>
.el-header {
  height: 80px;
  background: #666;
  .logo {
    height: 80px;
  }
  h2, .quit-login {
    text-align: center;
    height: 80px;
    line-height: 80px;
    color: #fff;
  }
}
.el-aside{
  .el-menu{
    height: calc(100vh - 80px);
  }
}
</style>

现在的款式为：

首页侧边栏的动态路由

新建 GoodsView.vue 和 UserView.vue 内容能够先随意写点什么

HomeView.vue

<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4"><img src="../assets/logo.png" class="logo"/></el-col>
          <el-col :span="16"><h2>后台管理体系</h2></el-col>
          <el-col :span="4"><span class="quit-login">退出登录</span></el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              router
          >
            <!--router为启用 vue-router 模式。启用该模式会在激活导航时以 index 作为 path 进行路由跳转-->
            <el-menu-item :index="item.path" v-for="item in list" :key="item.path">
              {{ item.meta.title }}
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <!--设置路由出口-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import {useRouter} from "vue-router";
export default defineComponent({
  name: 'HomeView',
  setup() {
    const router = useRouter()
    const list = router.getRoutes().filter(value => value.meta.isShow)
    console.log(list);
    return {
      list
    }
  },
  components: {},
});
</script>
......

index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    children:[
      {
        path: 'goods',
        name: 'goods',
        meta:{
          isShow:true,
          title:'产品列表'
        },
        component: () => import('../views/GoodsView.vue')
      },
      {
        path: 'user',
        name: 'user',
        meta:{
          isShow:true,
          title:'用户列表'
        },
        component: () => import('../views/UserView.vue')
      }
    ]
  },
 ......
]
......
export default router