fix: dynamic router is multi render

antdv-pro · May 12, 2024 · fd0b825 · fd0b825
1 parent 9f2d91f
commit fd0b825
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 32 deletions.
diff --git a/src/layouts/components/route-view.vue b/src/layouts/components/route-view.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ParentCompConsumer } from '@/layouts/basic-layout/parent-comp-consumer'
+
+defineOptions({
+  name: 'CustomRouteView',
+})
+
+const appStore = useAppStore()
+const { layoutSetting } = storeToRefs(appStore)
+const multiTabStore = useMultiTab()
+const { cacheList } = storeToRefs(multiTabStore)
+const { getComp } = useCompConsumer()
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <ParentCompConsumer>
+      <RouterView>
+        <template #default="{ Component, route }">
+          <Transition appear :name="layoutSetting.animationName" mode="out-in">
+            <KeepAlive v-if="layoutSetting.keepAlive" :include="[...cacheList]">
+              <component :is="getComp(Component)" :key="route.fullPath" />
+            </KeepAlive>
+            <component :is="Component" v-else :key="route.fullPath" />
+          </Transition>
+        </template>
+      </RouterView>
+    </ParentCompConsumer>
+  </div>
+</template>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
@@ -3,6 +3,7 @@ import { pick } from '@v-c/utils'
 import BasicLayout from './basic-layout/index.vue'
 import SettingDrawer from './components/setting-drawer/index.vue'
 import MultiTab from './multi-tab/index.vue'
+import RouteView from './components/route-view.vue'
 import { animationNameList } from '~@/config/default-setting'
 
 defineOptions({
@@ -71,13 +72,7 @@ const layoutProps = computed(() =>
     <template #renderFooterLinks />
 
     <a-watermark h-full flex flex-col flex-1 :content="!layoutSetting.watermark ? '' : layoutSetting.title ?? 'Antdv Pro'">
-      <RouterView>
-        <template #default="{ Component, route }">
-          <KeepAlive>
-            <component :is="Component" :key="route.fullPath" />
-          </KeepAlive>
-        </template>
-      </RouterView>
+      <RouteView />
     </a-watermark>
   </BasicLayout>
   <SettingDrawer

diff --git a/src/pages/common/route-view.vue b/src/pages/common/route-view.vue
@@ -1,30 +1,9 @@
 <script setup lang="ts">
-import { ParentCompConsumer } from '@/layouts/basic-layout/parent-comp-consumer'
-
 defineOptions({
-  name: 'CustomRouteView',
+  name: 'RouteView',
 })
-
-const appStore = useAppStore()
-const { layoutSetting } = storeToRefs(appStore)
-const multiTabStore = useMultiTab()
-const { cacheList } = storeToRefs(multiTabStore)
-const { getComp } = useCompConsumer()
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <ParentCompConsumer>
-      <RouterView>
-        <template #default="{ Component, route }">
-          <Transition appear :name="layoutSetting.animationName" mode="out-in">
-            <KeepAlive v-if="layoutSetting.keepAlive" :include="[...cacheList]">
-              <component :is="getComp(Component)" :key="route.fullPath" />
-            </KeepAlive>
-            <component :is="Component" v-else :key="route.fullPath" />
-          </Transition>
-        </template>
-      </RouterView>
-    </ParentCompConsumer>
-  </div>
+  <RouterView />
 </template>
diff --git a/src/router/generate-route.ts b/src/router/generate-route.ts
@@ -190,7 +190,8 @@ export function generateFlatRoutes(routes: RouteRecordRaw[]) {
     path: '/',
     redirect: ROOT_ROUTE_REDIRECT_PATH,
     name: 'ROOT_EMPTY_PATH',
-    component: getRouterModule('RouteView'),
+    // fixBug: https://github.com/antdv-pro/antdv-pro/issues/179
+    // component: getRouterModule('RouteView'),
     children: flatRoutesList,
   }
   return [parentRoute]

diff --git a/src/router/router-modules.ts b/src/router/router-modules.ts
@@ -16,7 +16,7 @@ export const basicRouteMap = {
   // iframe模式下使用
   Iframe: () => import('~/pages/common/iframe.vue'),
   // 一般用于存在子集的页面
-  RouteView: () => import('~/pages/common/route-view.vue'),
+  RouteView: () => import('~/layouts/components/route-view.vue'),
   // 空页面
   ComponentError: () => import('~/pages/exception/component-error.vue'),
 }