vue3 + Element-plus 开发后台管理系统（16）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

搭建Layout架构 解决方案与实现

创建页面组件，使用临时 menu 菜单

处理完了退出登录之后，接下来我们来处理动态 menu 菜单

我们先创建一个临时的静态 menu

创建 layout/SideBar/SideBarMenu.vue

<template>
  <!-- 一级 menu 菜单 -->
  <el-menu
    :uniqueOpened="true"
    default-active="2"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <!-- 子集 menu 菜单 -->
    <el-submenu index="1">
      <template #title>
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <!-- 具体菜单项 -->
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <template #title>导航四</template>
    </el-menu-item>
  </el-menu>
</template>

在 layout/SideBar/index.vue 中导入该组件

<template>
  <div class="">
    <h1>占位</h1>
    <el-scrollbar>
      <sidebar-menu></sidebar-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import SidebarMenu from './SidebarMenu'
import {} from 'vue'
</script>

那么至此我们生成了一个临时的 menu 菜单，从这个临时的 menu 菜单出可以看到，el-menu 其实分成了三个部分：

1、el-menu：整个 menu 菜单

2、el-submenu：子集 menu 菜单

3、el-menu-item：具体菜单项

动态menu菜单处理方案解析

上边处理了静态的 menu 菜单，接下来看一看如何处理动态 menu 菜单

动态 menu 菜单主要是和动态路由表配合去实现用户权限的

这里我们先看一看动态 menu 菜单，至于用户权限后面在去看

所谓的动态 menu 菜单指的是

根据路由表的配置，自动生成对应的 menu 菜单
当路由表发生变化时，menu 菜单自动发生变化

明白了动态 menu 菜单的含义，接下来就看一看动态 menu 菜单的实现方案

1、定义路由表对应的 menu 菜单规则

2、根据规则制定路由表

3、根据规则，依据路由表，生成 menu 菜单

根据这个方案我们可以发现，实现动态 menu 菜单最核心的关键其实就是步骤一

那么我们就来看一下如何实现

对于单个路由规则而言

如果 meta && meta.title && meta.icon 都存在，则显示在 menu 菜单中，其中 title 为显示的内容，icon 为显示的图标，如果存在 children 则已 el-sub-menu （子菜单）展示，否则则以 ele-menu-item（菜单项）展示

如果不存在则不现实在 menu 菜单中