调整所有二级页面，左侧侧边栏默认展开高亮，例如，智会议

src/components/home/ContainerAside.vue

@@ -1,90 +1,104 @@
 <script>
-import {requireImg} from "@/utils/requireImg";
+import { requireImg } from "@/utils/requireImg";
 
 export default {
   data() {
     return {
       selectedKeys: [],
       openKeys: [],
-      highLight: {backgroundColor: '#e9f6fd'},
+      highLight: { backgroundColor: "#e9f6fd" },
       menuList: [],
-      height: '100%',
-    }
+      height: "100%"
+    };
   },
   mounted() {
     let app = this;
     this.$nextTick(() => {
-      app.getCurrMenuList()
-    })
-
+      app.getCurrMenuList();
+    });
   },
   methods: {
     requireImg,
     getCurrMenuList() {
       let matchRoutes = this.$route.matched;
-      let menu = this.$store.menuStore().currMenu
+      let menu = this.$store.menuStore().currMenu;
       this.menuList = [];
-      if (menu.children && menu.children.length>0) {
-        this.menuList = JSON.parse(JSON.stringify(menu.children))
+      if (menu.children && menu.children.length > 0) {
+        this.menuList = JSON.parse(JSON.stringify(menu.children));
+      }
+      let currMenu = matchRoutes[matchRoutes.length - 1];
+      let index = this.menuList.findIndex(item => item.router == currMenu.path);
+      if (this.menuList[0].name) {
+        this.openKeys = [this.menuList[0].name];
       }
-      let currMenu = matchRoutes[matchRoutes.length-1];
-      let index = this.menuList.findIndex(item => item.router==currMenu.path);
-      if (index>-1) {
+      if (index > -1) {
         currMenu = this.menuList[index];
-        if (currMenu.children && currMenu.children.length>0) {
-          this.toRoute(currMenu.children[0].router, currMenu.router)
-        } else  {
+        if (currMenu.children && currMenu.children.length > 0) {
+          this.toRoute(currMenu.children[0].router, currMenu.router);
+        } else {
           this.toRoute(currMenu.router);
         }
       } else {
-        currMenu = this.menuList[0]
-        if (currMenu.children && currMenu.children.length>0) {
-          this.toRoute(currMenu.children[0].router, currMenu.router)
-        } else  {
+        currMenu = this.menuList[0];
+        if (currMenu.children && currMenu.children.length > 0) {
+          this.toRoute(currMenu.children[0].router, currMenu.router);
+        } else {
           this.toRoute(currMenu.router);
         }
       }
     },
     handleClick(item) {
-      this.toRoute(item.key)
+      this.toRoute(item.key);
     },
     toRoute(path, parentPath) {
-      this.$router.push({path: path})
-      this.selectedKeys = [path]
-      //if (parentPath) {
-      //  this.openKeys = [parentPath]
-      //}
-      this.$forceUpdate()
+      this.$router.push({ path: path });
+      this.selectedKeys = [path];
+      if (this.menuList) {
+        this.menuList.forEach(item => {
+          if (path.indexOf(item.router) != -1) {
+            this.openKeys = [item.name];
+          }
+        });
+      }
+      this.$forceUpdate();
     }
   }
-}
+};
 </script>
 
 <template>
-  <div class="containerAside" :style="{height: '100%'}">
+  <div class="containerAside" :style="{ height: '100%' }">
     <a-menu
-        style="width: 100%;padding-top: 8px;height: 100%"
-        mode="inline"
-        theme="dark"
-        v-model:selectedKeys="selectedKeys"
-        :openKeys.sync="openKeys"
-        @click="handleClick"
+      style="width: 100%;padding-top: 8px;height: 100%"
+      mode="inline"
+      theme="dark"
+      :selectedKeys="selectedKeys"
+      :openKeys.sync="openKeys"
+      @click="handleClick"
     >
       <template v-for="item in menuList">
-        <a-menu-item  class="menuItem" :key="item.router" :route="item.router" v-if="!item.children">
-        <span class="anticon" style="vertical-align: text-top">
-          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg('function/asideMenus/'+item.icon)"></a-avatar>
-        </span>
-          <span >
-            {{ item.name }}
+        <a-menu-item class="menuItem" :key="item.router" :route="item.router" v-if="!item.children">
+          <span class="anticon" style="vertical-align: text-top">
+            <a-avatar
+              class="function-avatar"
+              shape="square"
+              :size="20"
+              :src="requireImg('function/asideMenus/' + item.icon)"
+            ></a-avatar>
           </span>
+          <span> {{ item.name }} </span>
         </a-menu-item>
 
         <a-sub-menu :key="item.name" v-else>
           <template #title>
             <span class="anticon" style="vertical-align: text-top">
-          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg('function/asideMenus/'+item.icon)"></a-avatar>
-        </span>
+              <a-avatar
+                class="function-avatar"
+                shape="square"
+                :size="20"
+                :src="requireImg('function/asideMenus/' + item.icon)"
+              ></a-avatar>
+            </span>
             <span>{{ item.name }}</span>
           </template>
           <a-menu-item v-for="subItem in item.children" :key="subItem.router" :route="subItem.router">
@@ -92,7 +106,6 @@ export default {
           </a-menu-item>
         </a-sub-menu>
       </template>
-
     </a-menu>
   </div>
 </template>

src/views/HomeView.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="home">
     <a-layout id="components-layout-demo-top-side-2">
-      <a-layout-header class="header">
-        <HomeHeader :leftVisible.sync="leftVisible" :is-login="true" />
-      </a-layout-header>
+      <a-layout-header class="header"> <HomeHeader :leftVisible.sync="leftVisible" :is-login="true" /> </a-layout-header>
       <a-layout class="main_body">
         <a-drawer
           v-if="leftVisible"
@@ -36,15 +34,7 @@
         <!-- 内容 -->
         <a-layout-content class="home-page">
           <Transition name="fade-transform" mode="out-in">
-            <router-view
-              :key="
-                $route.matched[1]
-                  ? $route.matched[1].name
-                    ? $route.matched[1].name
-                    : -1
-                  : -1
-              "
-            />
+            <router-view :key="$route.matched[1] ? ($route.matched[1].name ? $route.matched[1].name : -1) : -1" />
           </Transition>
         </a-layout-content>
       </a-layout>
@@ -63,7 +53,7 @@ export default {
   components: {
     HomeHeader,
     HomeAside,
-    HomeLeft,
+    HomeLeft
   },
   data() {
     return {
@@ -72,13 +62,13 @@ export default {
       asideWidth: 160,
       collapsedWidth: 60,
       contentWidth: "84%",
-      contentHeight: 450,
+      contentHeight: 450
     };
   },
   watch: {
     $route() {
       this.judgeHideAside();
-    },
+    }
   },
 
   mounted() {
@@ -105,8 +95,8 @@ export default {
         this.asideWidth = 160;
         this.collapsedWidth = 60;
       }
-    },
-  },
+    }
+  }
 };
 </script>