feat: 识别当前路由展开菜单项

dyggod · Jul 20, 2022 · 4f73056 · 4f73056
1 parent b329dce
commit 4f73056
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/src/layout/menu/index.vue b/src/layout/menu/index.vue
@@ -15,19 +15,23 @@
       </router-link>
     </div>
     <a-menu
+      v-model:openKeys="openKeys"
       v-model:selectedKeys="selectedKeys"
       theme="dark"
       mode="inline"
     >
-      <a-menu-item @click="navTo('/home')">
+      <a-menu-item
+        :key="homePath"
+        @click="navTo('/home')"
+      >
         <Icon
           :icon="'HomeOutlined'"
         />
         <span class="p-l">首页</span>
       </a-menu-item>
       <a-sub-menu
-        v-for="(item, index) in routes"
-        :key="`sub_${index}`"
+        v-for="(item) in routes"
+        :key="item.path"
       >
         <template #icon>
           <Icon
@@ -39,25 +43,25 @@
           {{ item.meta.title }}
         </template>
         <template
-          v-for="(it, ind) in item.children"
+          v-for="(it) in item.children"
         >
           <a-menu-item
             v-if="!it.children?.length"
-            :key="`item_${index}_${ind}`"
+            :key="it.path"
             @click="navTo(item.path)"
           >
             <span :class="item.meta.icon ? '' : 'p-l'">{{ it.meta.title }}</span>
           </a-menu-item>
           <a-sub-menu
             v-else
-            :key="`sub_${index}_${ind}`"
+            :key="String(it.path)"
           >
             <template #title>
               {{ it.meta.title }}
             </template>
             <a-menu-item
-              v-for="(it2, ind2) in it.children"
-              :key="`item_${index}_${ind}_${ind2}`"
+              v-for="(it2) in it.children"
+              :key="it2.path"
               @click="navTo(it2.path)"
             >
               <span :class="it2.meta.icon ? '' : 'p-l'">{{ it2.meta.title }}</span>
@@ -72,22 +76,46 @@
 <script lang="ts">
 import Icon from '@/components/Icon';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 </script>
 
 <script setup lang="ts">
 import { useRoutesStore } from '@/store/modules/routes';
+import { homePath } from '@/router/routes';
+
+type MenuKeys = string[];
 
 const routesStore = useRoutesStore();
 const { routes } = routesStore;
 const collapsed = ref<boolean>(false);
-const selectedKeys = ref<string[]>(['1']);
 
 const router = useRouter();
 function navTo(path: string) {
   const prefix = '/layout/';
   router.push(`${path}`);
 }
+
+function getNowKeys() {
+  const route = useRoute();
+  const { matched } = route;
+  const openKeys: MenuKeys = [];
+  const selectedKeys: MenuKeys = [];
+  if (matched.length > 0) {
+    matched.forEach((item, index) => {
+      if (index === matched.length - 1) {
+        selectedKeys.push(item.path);
+      } else {
+        openKeys.push(item.path);
+      }
+    });
+  }
+  return {
+    openKeys,
+    selectedKeys,
+  };
+}
+const openKeys = ref<string[]>(getNowKeys().openKeys);
+const selectedKeys = ref<string[]>(getNowKeys().selectedKeys);
 </script>
 
 <style lang="less" scoped>

diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
@@ -1,6 +1,8 @@
 import type { AppRouteRecordRaw, LoginIgnore } from '@/router/types';
 import asyncRoutes from './mount';
 
+export const homePath = '/home/index';
+
 export const RootRoute: AppRouteRecordRaw = {
   path: '/',
   name: 'Root',
@@ -23,10 +25,10 @@ export const Layout: AppRouteRecordRaw = {
   path: '/home',
   name: 'Home',
   component: () => import('@/layout/Layout.vue'),
-  redirect: '/home/index',
+  redirect: homePath,
   children: [
     {
-      path: '/home/index',
+      path: homePath,
       name: 'HomeIndex',
       component: () => import('@/pages/home/index.vue'),
       meta: {},