fix(keep-alive): fix the problem that the multi-level routing cache page is rendered multiple times #123

src/layouts/page/ParentView.vue

@@ -23,6 +23,7 @@
   import { useCache } from './useCache';
 
   export default defineComponent({
+    parentView: true,
     setup() {
       const { getCaches } = useCache(false);
 

src/layouts/page/index.tsx

@@ -12,7 +12,7 @@ import { useCache } from './useCache';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 
 interface DefaultContext {
-  Component: FunctionalComponent;
+  Component: FunctionalComponent & { type: { [key: string]: any } };
   route: RouteLocation;
 }
 
@@ -42,7 +42,11 @@ export default defineComponent({
                     ? 'fade-slide'
                     : null;
 
-                const renderComp = () => <Component key={route.fullPath} />;
+                // When the child element is the parentView, adding the key will cause the component to be executed multiple times. When it is not parentView, you need to add a key, because it needs to be compatible with the same route carrying different parameters
+                const isParentView = Component?.type.parentView;
+                const componentKey = isParentView ? {} : { key: route.fullPath };
+
+                const renderComp = () => <Component {...componentKey} />;
 
                 const PageContent = unref(openCache) ? (
                   <KeepAlive include={cacheTabs}>{renderComp()}</KeepAlive>