Merge pull request #108 from WeBankFinTech/keep-alive

Keep alive

docs/guide/route.md

@@ -106,7 +106,7 @@ pages
 ```
 
 **需要注意的是，满足以下任意规则的文件不会被注册为路由**：
-- 不是 `.vue` 文件
+- 不是 `.vue .jsx` 文件
 - `components` 目录中的文件
 
 
@@ -184,7 +184,12 @@ const router = new VueRouter({
   ]
 })
 ```
-在 Fes.js 里约定在 `.vue`单文件组件中的 `config`区块 为 `meta` 配置。如果 `pages/a.vue` 中有如下配置：
+
+接下来我们来配置 `meta`：
+
+<CodeGroup>
+  <CodeGroupItem title="vue" active>
+
 ```vue
 <config>
 {
@@ -193,6 +198,33 @@ const router = new VueRouter({
 }
 </config>
 ```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="jsx">
+
+```jsx
+import { defineRouteMeta, useRoute } from '@fesjs/fes';
+defineRouteMeta({
+    name: "store",
+    title: "vuex测试"
+})
+```
+
+  </CodeGroupItem>
+    <CodeGroupItem title="tsx">
+
+```tsx
+import { defineRouteMeta, useRoute } from '@fesjs/fes';
+defineRouteMeta({
+    name: "store",
+    title: "vuex测试"
+})
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+
 则编译后的路由配置为：
 ```js{5-8}
 [

docs/reference/plugin/plugins/layout.md

@@ -76,6 +76,16 @@ export default {
 
 ## 配置
 
+### keep-alive
+从 4.0.7 开始支持配置路由页面缓存：
+```
+<config lang="json">
+{
+    "keep-alive": true
+}
+</config>
+```
+
 ### 编译时配置
 在 `.fes.js` 中配置：
 ```js

docs/zh/guide/route.md

@@ -184,7 +184,12 @@ const router = new VueRouter({
   ]
 })
 ```
-在 Fes.js 里约定在 `.vue`单文件组件中的 `config`区块 为 `meta` 配置。如果 `pages/a.vue` 中有如下配置：
+
+接下来我们来配置 `meta`：
+
+<CodeGroup>
+  <CodeGroupItem title="vue" active>
+
 ```vue
 <config>
 {
@@ -193,6 +198,33 @@ const router = new VueRouter({
 }
 </config>
 ```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="jsx">
+
+```jsx
+import { defineRouteMeta, useRoute } from '@fesjs/fes';
+defineRouteMeta({
+    name: "store",
+    title: "vuex测试"
+})
+```
+
+  </CodeGroupItem>
+    <CodeGroupItem title="tsx">
+
+```tsx
+import { defineRouteMeta, useRoute } from '@fesjs/fes';
+defineRouteMeta({
+    name: "store",
+    title: "vuex测试"
+})
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+
 则编译后的路由配置为：
 ```js{5-8}
 [

docs/zh/reference/plugin/plugins/layout.md

@@ -76,6 +76,16 @@ export default {
 
 ## 配置
 
+### keep-alive
+从 4.0.7 开始支持配置路由页面缓存：
+```
+<config lang="json">
+{
+    "keep-alive": true
+}
+</config>
+```
+
 ### 编译时配置
 在 `.fes.js` 中配置：
 ```js

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -36,7 +36,14 @@
             </keep-alive>
         </router-view>
     </template>
-    <router-view v-else></router-view>
+    <router-view v-else v-slot="{ Component, route }">
+        <keep-alive :include="keepAlivePages">
+            <component
+                :is="getComponent(Component, route)"
+                :key="getPageKey(route)"
+            />
+        </keep-alive>
+    </router-view>
 </template>
 <script>
 import {
@@ -144,6 +151,22 @@ export default {
                 default:
             }
         };
+        const keepAlivePages = ref([]);
+        const getComponent = (Component, _route) => {
+            if (_route.meta['keep-alive']) {
+                const name = _route.meta?.name || _route.name;
+                if (name) {
+                    // 修改组件的 name
+                    Component.type.name = name;
+                    // 缓存的关键是组件name在keep-alive的include列表
+                    if (!keepAlivePages.value.includes(name)) {
+                        keepAlivePages.value = [...keepAlivePages.value, name];
+                    }
+                }
+            }
+
+            return Component;
+        };
         return {
             route,
             pageList,
@@ -152,7 +175,9 @@ export default {
             switchPage,
             handlerMore,
             handleCloseTab,
-            actions
+            actions,
+            getComponent,
+            keepAlivePages
         };
     }
 };

packages/fes-template/src/pages/editor.vue

@@ -11,7 +11,8 @@
 <config>
 {
     "name": "editor",
-    "title": "$editor"
+    "title": "$editor",
+    "keep-alive": true
 }
 </config>
 <script>