自定义菜单组件修复完毕，注意：如果超过三层结构，需要递归组件

src/layout/components/FixedHeader/components/MenuItem/index.vue

@@ -1,15 +1,16 @@
 <template>
-  <el-dropdown trigger="hover">
-    <div class="menu-item">
-      {{ item.meta.title }}
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item
-        @click.native="handlePath(secondRoute, secondIndex)"
-        v-for="(secondRoute, secondIndex) in item.children"
+  <el-menu
+    class="el-menu-vertical-demo"
+    @select="selectRouter"
+    :default-active="$route.path"
+  >
+    <template v-for="(secondRoute, secondIndex) in item.children">
+      <el-menu-item
+        :index="secondRoute.fullPath"
         :key="secondIndex"
+        v-if="!secondRoute.children"
       >
-        <section v-if="!secondRoute.children">
+        <template slot="title">
           <svg-icon
             v-if="
               secondRoute.meta &&
@@ -19,16 +20,36 @@
             :icon-class="secondRoute.meta.icon"
           />
           {{ secondRoute.meta.title }}
-        </section>
-        <section v-else>
-          <menu-item
-            :item="secondRoute"
-            :base-path="secondRoute.path"
-          ></menu-item>
-        </section>
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
+        </template>
+      </el-menu-item>
+      <el-submenu v-else :index="item.fullPath" :key="secondRoute.fullPath">
+        <template slot="title">
+          <svg-icon
+            v-if="
+              secondRoute.meta &&
+              secondRoute.meta.icon &&
+              secondRoute.meta.icon !== '#'
+            "
+            :icon-class="secondRoute.meta.icon"
+          />
+          {{ secondRoute.meta.title }}
+        </template>
+        <el-menu-item
+          v-for="(nextItem, nextIndex) in secondRoute.children"
+          :key="nextIndex"
+          :index="nextItem.fullPath"
+        >
+          <svg-icon
+            v-if="
+              nextItem.meta && nextItem.meta.icon && nextItem.meta.icon !== '#'
+            "
+            :icon-class="nextItem.meta.icon"
+          />
+          {{ nextItem.meta.title }}
+        </el-menu-item>
+      </el-submenu>
+    </template>
+  </el-menu>
 </template>
 
 <script>
@@ -39,25 +60,36 @@ export default {
       type: Object,
       required: true,
     },
-    basePath: {
-      type: String,
-      default: "",
-    },
   },
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+    console.log(this.item);
+  },
   methods: {
+    selectRouter(index, indexPath) {
+      console.log(index, "aaa");
+      this.$router.push(index);
+    },
+    filterActiveCss(path) {
+      return this.$route.path.indexOf(path) > -1;
+    },
     handlePath(item, index) {
-      console.log(item, "aaa");
-      //   this.$router.push(item.path);
+      if (item.children) return;
+      this.$router.push(item.fullPath);
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.el-menu-vertical-demo {
+  overflow: hidden;
+  li {
+    width: 160px;
+  }
+}
 .menu-item {
   font-size: 18px;
   color: #ffffff;
@@ -68,4 +100,14 @@ export default {
   padding: 3px 12px;
   cursor: pointer;
 }
+.activeCss {
+  color: #192a92;
+}
+
+::v-deep .el-menu-item,
+::v-deep .el-submenu__title {
+  height: 35px;
+  line-height: 35px;
+  padding: 0 15px;
+}
 </style>

src/layout/components/FixedHeader/components/MenuMain/index.vue

@@ -3,77 +3,95 @@
     <div
       v-for="(item, index) in topMenus"
       :key="index"
-      :class="isCurrentRoute(item.path) ? 'activeMenu' : ''"
-      @click="handlerRouter(item.path)"
+      :class="isCurrentRoute(item.fullPath) ? 'activeMenu' : ''"
     >
-      <div class="menu-item" v-if="!item.children">
+      <div
+        class="menu-item"
+        v-if="!item.children"
+        @click="handlerRouter(item.fullPath)"
+      >
         {{ item.meta.title }}
       </div>
-      <menu-item v-else :item="item" :base-path="item.path"></menu-item>
+      <el-dropdown trigger="click" v-else>
+        <div class="menu-item">
+          {{ item.meta.title }}
+        </div>
+
+        <el-dropdown-menu slot="dropdown">
+          <menu-item :item="item"></menu-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
 import MenuItem from "../MenuItem";
-import { constantRoutes } from "@/router";
+import { mapGetters } from "vuex";
 // 隐藏侧边栏路由
 export default {
   data() {
-    return {};
+    return {
+      topMenus: [],
+    };
   },
 
   components: {
     MenuItem,
   },
   mounted() {
-    this.childrenMenus();
+    this.filterRouter();
   },
   methods: {
-    // 设置子路由
-    childrenMenus() {
-      var childrenMenus = [];
-      this.routers.map((router) => {
-        for (var item in router.children) {
-          if (router.children[item].parentPath === undefined) {
-            if (router.path === "/") {
-              router.children[item].path = "/" + router.children[item].path;
-            } else {
-              if (!this.ishttp(router.children[item].path)) {
-                router.children[item].path =
-                  router.path + "/" + router.children[item].path;
-              }
-            }
-            router.children[item].parentPath = router.path;
+    filterRouter() {
+      this.sidebarRouters.forEach((item) => {
+        if (item.hidden !== true && item.redirect != "index") {
+          if (item.path === "/") {
+            this.topMenus.push(item.children[0]);
+          } else {
+            this.topMenus.push(item);
           }
-          childrenMenus.push(router.children[item]);
         }
       });
-      return constantRoutes.concat(childrenMenus);
+      this.addParentId(this.topMenus, null);
+    },
+    addParentId(tree, parentPath) {
+      tree.forEach((node) => {
+        // node.parentPath = node.path + parentPath; // 将父级的 id 添加为属性
+        let merge = parentPath
+          ? this.filterPath(parentPath) + this.filterPath(node.path)
+          : this.filterPath(node.path);
+        node.fullPath = merge;
+        if (node.children && node.children.length > 0) {
+          this.addParentId(node.children, node.fullPath); // 递归调用，传递当前节点的 id 作为父级 id
+        }
+      });
+      return tree;
+    },
+    filterPath(path) {
+      path = path.charAt(0) === "/" ? path : "/" + path;
+      return path;
     },
+
     //是否当前路由
     isCurrentRoute(key) {
-      return this.$route.path === key;
+      return this.$route.path.indexOf(key) > -1;
     },
 
     handlerRouter(key) {
-      console.log(key);
-      const route = this.routers.find((item) => item.path === key);
+      console.log(key, "Path");
       if (this.ishttp(key)) {
         //说明创建路由选择的是外部链接
         window.open(key, "_blank");
-      } else if (!route || !route.children) {
-        //没有子路由路径内部打开
-        const routeMenu = this.childrenMenus().find(
-          (item) => item.path === key
-        );
-        if (routeMenu && routeMenu.query) {
-          let query = JSON.parse(routeMenu.query);
-          this.$router.push({ path: key, query: query });
-        } else {
-          this.$router.push({ path: key });
-        }
+      } else {
+        this.$router.push({ path: key });
+
+        // if (routeMenu && routeMenu.query) {
+        //   let query = JSON.parse(routeMenu.query);
+        //   this.$router.push({ path: key, query: query });
+        // } else {
+
+        // }
       }
     },
 
@@ -87,25 +105,20 @@ export default {
       return this.$store.state.settings.theme;
     },
     // 顶部显示菜单
-    topMenus() {
-      let topMenus = [];
-      this.sidebarRouters.map((menu) => {
-        if (menu.hidden !== true && menu.redirect !== "index") {
-          // 兼容顶部栏一级菜单内部跳转
-          if (menu.path === "/") {
-            topMenus.push(menu.children[0]);
-          } else {
-            topMenus.push(menu);
-          }
-        }
-      });
-
-      return topMenus;
-    },
-    // 所有的路由信息
-    routers() {
-      return this.$store.state.permission.topbarRouters;
-    },
+    // topMenus() {
+    //   let topMenus = [];
+    //   this.sidebarRouters.map((menu) => {
+    //     if (menu.hidden !== true && menu.redirect !== "index") {
+    //       // 兼容顶部栏一级菜单内部跳转
+    //       if (menu.path === "/") {
+    //         topMenus.push(menu.children[0]);
+    //       } else {
+    //         topMenus.push(menu);
+    //       }
+    //     }
+    //   });
+    //   return topMenus;
+    // },
   },
 };
 </script>