1. 效果：

2. 实现：

创建外层菜单
AsideMenu.vue
组件和子菜单项
AsideSubMenu.vue
组件，在
AsideSubMenu
中进行递归操作。

AsideMenu.vue文件内容如下：

<template>
  <aside class="wrap">
    <el-menu
      :default-active="activeMenu"
      router
      :class="'menu-left'"
      :default-openeds="openedsArr"
      text-color="#fff"
    >
      <AsideSubMenu :menuData="menuData"></AsideSubMenu>
    </el-menu>
  </aside>
</template>

<script>
import AsideSubMenu from "./AsideSubMenu.vue";
export default {
  name: "AsideMenu",
  components: {
    AsideSubMenu,
  },
  props: {
    menuData: {
      type: Array,
    },
  },
  computed: {
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // 此处添加判断的原因见说明
      if (meta.matchPath) {
        return meta.matchPath;
      } else {
        return path;
      }
    },
    // 设置默认展开菜单项
    openedsArr() {
      // const arr = this.menuData.map((item) => {
      //   return item.title;
      // });
      // return arr;
      return [];
    },
  },
};
</script>

判断高亮状态的activeMenu方法中的判断matchPath属性可以让多个路由不同的页面匹配同一个菜单高亮状态，因为菜单高亮状态是根据路由地址匹配的。如果两个不同的路由页面想公用同一个菜单高亮状态（如详情页面和列表页）就可以使用该方法实现。在router文件里设置meta对象，添加matchPath属性设置为想要共用的高亮状态的页面的路由地址。（有点绕