From 90b3fab28ef53135f3cab1f69a4675f98a130857 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sun, 8 Nov 2020 18:43:05 +0800
Subject: [PATCH] feat: routes with parameters can be cached

---
 CHANGELOG.zh_CN.md                       |  1 +
 src/layouts/default/LayoutContent.tsx    | 13 ++++++++-----
 src/layouts/page/index.tsx               |  4 ++--
 src/views/demo/feat/tab-params/index.vue |  4 +++-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index b2d3afe6..cdaa80d4 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -6,6 +6,7 @@
 - 增加富文本嵌入表单的示例
 - 表单组件 schema 增加 `required`属性。简化配置
 - openModal 和 openDrawer 第二个参数可以代替`transferModalData`传参到内部
+- 带参路由可以被缓存
 
 ### ⚡ Performance Improvements
 
diff --git a/src/layouts/default/LayoutContent.tsx b/src/layouts/default/LayoutContent.tsx
index 47bd8607..464fb399 100644
--- a/src/layouts/default/LayoutContent.tsx
+++ b/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>
       );
     };
   },
diff --git a/src/layouts/page/index.tsx b/src/layouts/page/index.tsx
index eb3f8097..fd31615c 100644
--- a/src/layouts/page/index.tsx
+++ b/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
diff --git a/src/views/demo/feat/tab-params/index.vue b/src/views/demo/feat/tab-params/index.vue
index bd06aa5a..c6178ff5 100644
--- a/src/views/demo/feat/tab-params/index.vue
+++ b/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">