布局搭建

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

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

侧边栏，我们可以参考 侧栏

然后我们需要修改样式，右键查看布局就能看到布局的 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>Mainel-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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

目前的样式为：

首页侧边栏的动态路由

新建 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
          >
            
            <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>
......
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36