~

src/layout/app/components/Sidebar/index.vue

@@ -3,21 +3,9 @@
     <!-- :class="{'has-logo':showLogo}" -->
     <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <el-scrollbar class="scrollbar-wrapper">
-      <el-menu
-        class="menu-wrapper"
-        :default-active="activeMenu"
-        :default-openeds="openedMenu"
-        :collapse="SidebarStore.isCollapse"
-        :unique-opened="true"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item
-          v-for="route in routes"
-          :key="route.path"
-          :item="route"
-          :base-path="route.path"
-        />
+      <el-menu class="menu-wrapper" :default-active="activeMenu" :default-openeds="openedMenu"
+        :collapse="SidebarStore.isCollapse" :unique-opened="true" :collapse-transition="false" mode="vertical">
+        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -38,7 +26,7 @@ export default defineComponent({
     },
     activeMenu() {
       const route = this.$route
-      const { meta, path } = route
+      const { meta, path, matched } = route
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
         return meta.activeMenu
@@ -52,7 +40,7 @@ export default defineComponent({
       }
       return path
     },
-    openedMenu(){
+    openedMenu() {
       // return []
       return this.routes.map(item => item.path)
     },
@@ -74,9 +62,11 @@ export default defineComponent({
 .aside-wrapper {
   height: 100%;
   width: 100%;
+
   .scrollbar-wrapper {
     height: 100%;
     width: 100%;
+
     .el-scrollbar__wrap {
       overflow-x: hidden !important;
     }