后台管理系统一级菜单左侧显示

根据提供的代码，后台管理系统的一级菜单左侧显示是通过使用`router-view`和`SideMenu`组件来实现的。在`index.vue`文件中，通过`router-view`来进行组件页面跳转，并在`el-aside`中使用`SideMenu`组件来显示一级菜单下的二级菜单。具体代码如下：

<template>
  <div>
    <!-- 一级菜单下面所拥有的二级菜单 -->
    <el-aside>
      <SideMenu :itemList='itemList'></SideMenu>
    </el-aside>
    <!-- 以及二级菜单所对应的页面 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import SideMenu from '@/components/sidemenu/SideMenu';

export default {
  components: {
    SideMenu
  },
  data() {
    return {
      itemList: \[
        { path: 'test1-1', title: '二级菜单1-1' },
        { path: 'test1-2', title: '二级菜单1-2' },
        { path: 'test1-3', title: '二级菜单1-3' },
        { path: 'test1-4', title: '二级菜单1-4' },
        { path: 'test1-5', title: '二级菜单1-5' }
      \]
    }
  }
}
</script>

在`SideMenu.vue`文件中，使用`el-menu`组件来显示左侧的二级菜单栏。具体代码如下：

<template>
  <div class="sidebar">
    <!-- 左侧二级菜单栏的组件封装 -->
    <el-menu class="sidebar-el-menu" :default-active="toIndex()" background-color="white" text-color="#7a8297" active-text-color="#2d8cf0" router>
      <div v-for="item in items" :key="item">
        <!-- 二级菜单 -->
        <el-menu-item :index="item.index" :key="item.index" v-if="item.nextItems == undefined">
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
        <!-- 三级菜单 -->
        <el-submenu :index="item.index" v-else>
          <span slot="title">{{item.title}}</span>
          <el-menu-item-group>
            <el-menu-item v-for="itemsTwo in item.nextItems" :index="itemsTwo.index" :key="itemsTwo.index">
              {{itemsTwo.title}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

通过以上代码，可以实现后台管理系统的一级菜单左侧显示效果。
#### 引用[.reference_title]
- *1* *3* [Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏](https://blog.csdn.net/weixin_41856395/article/details/110441057)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧多级菜单栏（二级、三级等）](https://blog.csdn.net/weixin_41856395/article/details/116062604)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]