布局搭建

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

头部，我们可以左边放一个 logo，中间放一些文字，右侧放退出登录按钮。所以我们可以根据 Layout布局-混合布局的左中右的布局来写，我们复制最后的代码放入我们上面代码的 Header 部分侧边栏，我们可以参考侧栏

然后我们需要修改样式，右键查看布局就能看到布局的 class，通过 class 名增加样式即可

html 复制代码

<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

html 复制代码

<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

typescript 复制代码

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

【vue3+ts后台管理】首页完成

布局搭建

首页侧边栏的动态路由