临时路由

• 分成两部分

• SideBar.vue 调用 SideBarMenu.vue

• SideBarMenu.vue 调用 SideBarItem.vue

SideBar.vue

<template>
    <div class="sidebar">
        <h1>占位</h1>
        <SideBarMenu></SideBarMenu>
    </div>
</template>

<script setup></script>

<style lang="scss" scoped>
    .sidebar {
    }
</style>

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>

<script setup></script>

<style lang="scss" scoped></style>

SideBarItem.vue 后续会说