kuailelunwen_new_houtai/src/components/SliderMenu.vue

<template>
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse"
    :default-openeds="['1', '2']">
    <div class="menu-top">
      <span v-show="!isCollapse">
        导航
      </span>
      <img v-if="!isCollapse" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
      <img v-else src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
    </div>
    <el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index"
        :index="subItem.index" @click="handleMenuItemClick(subItem)">
        {{ subItem.title }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: 'SliderMenu',
  data() {
    return {
      isCollapse: false,
      activeMenu: '',
      routerList: [],
      menuData: [
        {
          index: '1',
          title: '父级菜单1',
          icon: 'el-icon-location',
          children: [
            { index: '1-1', title: '子级菜单1-1', path: '/' },
            { index: '1-2', title: 'ui页面', path: '/ui' }
          ]
        },
        {
          index: '2',
          title: '父级菜单2',
          icon: 'el-icon-menu',
          children: [
            { index: '2-1', title: '子级菜单2-1', path: '/about' },
            { index: '2-2', title: '加盟耶main', path: '/franchise' }
          ]
        }
      ]
    };
  },
  methods: {
    changeMenuStatus(flag) {
      this.isCollapse = flag;
    },
    handleSelect(index) {
      this.activeMenu = index;
    },
    handleMenuItemClick(item) {
      this.$router.push(item.path);
      this.activeMenu = item.index;
    }
  },
  mounted() {
    this.routerList = this.$router.options.router;//配置路由
    console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
    // 初始化时设置默认激活的菜单项
    this.activeMenu = this.$route.path;
  }
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 158px;
  min-width: 158px;
  min-height: calc(100vh - 62px);
}

.el-menu-item {
  padding: 0 22px;
}

.menu-top {
  background: #FFFFFF;
  box-sizing: border-box;
  /* middle/middle_line_1 */
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #DFE2E6;
  padding: 15px 0px;
  margin: 0 22px;
  display: flex;
  font-size: 16px;
  color: #1E2226;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.08em;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-submenu {
  width: 16px;
  font-size: 16px;
}

::v-deep .el-submenu .el-menu-item {
  min-width: 138px;
  width: 100%;
}

::v-deep .el-submenu__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

::v-deep .el-submenu__title:hover {
  background-color: transparent;
  cursor: not-allowed;
}

::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
  display: none;
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 22px;
  display: flex;
  justify-content: flex-start;
}

::v-deep .el-submenu .el-menu-item {
  height: 36px;
}

::v-deep.el-submenu .el-menu-item {
  height: 36px;
  line-height: 36px;
  color: #8A9099;
  letter-spacing: 0.08em;
}

::v-deep .el-menu-item:hover {
  background: #F6F7FA;
}

::v-deep .el-menu-item.is-active {
  color: #006AFF;
  font-weight: bold;
}
</style>