1. SideBar下的组件

2. index.vue 页面内容

<template>
  <div class="asideNav">
    <!-- 如果不要Logo可以删除此代码 -->
    <Logo v-if="showLogo" :collapse="isCollapse"></Logo>
    <!--
        default-active：活动菜单颜色
        collapse：侧边栏隐藏
        background-color： 背景颜色
        text-color：菜单中文本颜色
        unique-opened： 是否唯一打开
        active-text-colo： 活动文本颜色
        collapse-transition： 隐藏过渡
        mode="vertical"：绑定变量
       -->
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      :collapse="isCollapse"
      unique-opened
      active-text-color="#FFC000"
      background-color="#000000"
      text-color="skyblue"
      mode="vertical"
    >
     <sidebar-item 
      v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </div>
</template>
 
<script>
import {
    mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
export default {
   
  data() {
   
    return {
   };
  },
  components: {
    SidebarItem, Logo },
  computed: {
   
   ...mapGetters([
      'sidebar'
    ]),
    routes() {
   
      return this.$router.options.routes;
    },
    activeMenu() {
   
      // 获取当前路由对象
      const route = this.$route;
      // 获取meta对象 和路径对象
      const {
    meta, path } = route;
      // 如果设置路径，侧栏将突出显示您设置的路径
      if (meta.activeMenu) {
   
        return meta.activeMenu;
      }
      return path;
    },
     // 显示logo
    showLogo() {
   
      return this.$store.state.settings.sidebarLogo;
    },
    // 是否关闭侧边栏
    isCollapse() {
   
      return !this.sidebar.opened
    }
  },
};
</script>
 
<style lang='scss' scoped>
.asideNav {
   
  text-align: left;
}
/*加快侧边栏文字消失的速度*/
.el-menu {
   
  transition: all 10ms;
}
</style>

3. Item.vue 页面内容

<script>
export default {
   
  name: 'MenuItem',
  functional: true,
  props