Merge pull request #59 from hehehai/fix-multistage-menu

fix: multistage-menu
arco-design · Apr 26, 2022 · 01d03ed · 01d03ed
2 parents 2340e30 + b548eaa
commit 01d03ed
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 30 deletions.
diff --git a/arco-design-pro-vite/src/components/menu/index.vue b/arco-design-pro-vite/src/components/menu/index.vue
@@ -86,7 +86,8 @@
       };
       listenerRouteChange((newRoute) => {
         if (newRoute.meta.requiresAuth && !newRoute.meta.hideInMenu) {
-          const key = newRoute.matched[2]?.name as string;
+          const key = newRoute.matched[newRoute.matched.length - 1]
+            ?.name as string;
           selectedKey.value = [key];
         }
       }, true);
@@ -101,25 +102,26 @@
             _route.forEach((element) => {
               // This is demo, modify nodes as needed
               const icon = element?.meta?.icon
-                ? `<${element?.meta?.icon}/>`
-                : ``;
-              const r = (
+                ? () => h(compile(`<${element?.meta?.icon}/>`))
+                : null;
+              const r = element?.children ? (
                 <a-sub-menu
                   key={element?.name}
                   v-slots={{
-                    icon: () => h(compile(icon)),
+                    icon,
                     title: () => h(compile(t(element?.meta?.locale || ''))),
                   }}
                 >
-                  {element?.children?.map((elem) => {
-                    return (
-                      <a-menu-item key={elem.name} onClick={() => goto(elem)}>
-                        {t(elem?.meta?.locale || '')}
-                        {travel(elem.children ?? [])}
-                      </a-menu-item>
-                    );
-                  })}
+                  {travel(element?.children)}
                 </a-sub-menu>
+              ) : (
+                <a-menu-item
+                  key={element?.name}
+                  v-slots={{ icon }}
+                  onClick={() => goto(element)}
+                >
+                  {t(element?.meta?.locale || '')}
+                </a-menu-item>
               );
               nodes.push(r as never);
             });
@@ -128,6 +130,7 @@
         }
         return travel(menuTree.value);
       };
+
       return () => (
         <a-menu
           v-model:collapsed={collapsed.value}

diff --git a/arco-design-pro-vite/src/layout/page-layout.vue b/arco-design-pro-vite/src/layout/page-layout.vue
@@ -1,19 +1,10 @@
 <template>
-  <router-view>
-    <template #default>
-      <router-view v-slot="{ Component, route }">
-        <transition name="fade" mode="out-in" appear>
-          <component
-            :is="Component"
-            v-if="route.meta.ignoreCache"
-            :key="route.fullPath"
-          />
-          <keep-alive v-else :include="cacheList">
-            <component :is="Component" :key="route.fullPath" />
-          </keep-alive>
-        </transition>
-      </router-view>
-    </template>
+  <router-view v-slot="{ Component, route }">
+    <transition name="fade" mode="out-in" appear>
+      <keep-alive :include="cacheList">
+        <component :is="Component" :key="route.fullPath" />
+      </keep-alive>
+    </transition>
   </router-view>
 </template>
 

diff --git a/arco-design-pro-vite/src/store/modules/tab-bar/index.ts b/arco-design-pro-vite/src/store/modules/tab-bar/index.ts
@@ -19,7 +19,7 @@ const useAppStore = defineStore('tabBar', {
       // Set the first element dynamically as needed
       {
         title: 'menu.dashboard.workplace',
-        name: 'workplace',
+        name: 'Workplace',
         fullPath: '/dashboard/workplace',
       },
     ],
@@ -37,7 +37,9 @@ const useAppStore = defineStore('tabBar', {
   actions: {
     updateTabList(route: RouteLocationNormalized) {
       this.tagList.push(formatTag(route));
-      this.cacheTabList.add(route.name as string);
+      if (!route.meta.ignoreCache) {
+        this.cacheTabList.add(route.name as string);
+      }
     },
     deleteTag(idx: number, tag: TagProps) {
       this.tagList.splice(idx, 1);