feat: routes with parameters can be cached

vben

2020-11-08 90b3fab28ef53135f3cab1f69a4675f98a130857

feat: routes with parameters can be cached

 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 @@
      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 @@
                // 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">