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屬性設定為想要共用的高亮狀態的頁面的路由地址。（有點繞