feat: routes with parameters can be cached

Author: anncwb

CHANGELOG.zh_CN.md

@@ -6,6 +6,7 @@
 - 增加富文本嵌入表单的示例
 - 表单组件 schema 增加 `required`属性。简化配置
 - openModal 和 openDrawer 第二个参数可以代替`transferModalData`传参到内部
+- 带参路由可以被缓存
 
 ### ⚡ Performance Improvements
 

src/layouts/default/LayoutContent.tsx

@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue';
-// import { Layout } from 'ant-design-vue';
+import { Layout } from 'ant-design-vue';
+import { RouterView } from 'vue-router';
+
 // hooks
 
 import { ContentEnum } from '/@/enums/appEnum';
 import { appStore } from '/@/store/modules/app';
-import PageLayout from '/@/layouts/page/index';
+// import PageLayout from '/@/layouts/page/index';
 export default defineComponent({
   name: 'DefaultLayoutContent',
   setup() {
@@ -13,9 +15,10 @@ export default defineComponent({
       const { contentMode } = getProjectConfig;
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
-        // <Layout.Content class={`layout-content ${wrapClass} `}>
-        <PageLayout class={`layout-content ${wrapClass} `} />
-        // </Layout.Content>
+        <Layout.Content class={`layout-content ${wrapClass} `}>
+          {() => <RouterView />}
+          {/* <PageLayout class={`layout-content ${wrapClass} `} /> */}
+        </Layout.Content>
       );
     };
   },

src/layouts/page/index.tsx

@@ -44,10 +44,10 @@ export default defineComponent({
                 // TODO add key?
                 const Content = openCache ? (
                   <KeepAlive max={max} include={cacheTabs}>
-                    <Component />
+                    <Component key={route.path} />
                   </KeepAlive>
                 ) : (
-                  <Component />
+                  <Component key={route.path} />
                 );
                 return openRouterTransition ? (
                   <Transition

src/views/demo/feat/tab-params/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="p-4">
     Current Param : {{ params }}
-    <!-- <input /> -->
+    <br />
+    Keep Alive
+    <input />
   </div>
 </template>
 <script lang="ts">