fix: 修复三级以上路由页面无法缓存的问题

fast-crud/fast-crud#394
fast-crud · Jun 8, 2024 · ce00dee · ce00dee
1 parent f107ab6
commit ce00dee
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/src/layout/layout-pass.vue b/src/layout/layout-pass.vue
@@ -1,3 +1,10 @@
 <template>
-  <router-view />
+  <router-view> </router-view>
 </template>
+
+<!--<script lang="ts" setup>-->
+<!--import { usePageStore } from "/@/store/modules/page";-->
+
+<!--const pageStore = usePageStore();-->
+<!--const keepAlive = pageStore.keepAlive;-->
+<!--</script>-->
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -18,7 +18,11 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
   // 进度条
   NProgress.start();
-
+  // 修复三级以上路由页面无法缓存的问题
+  if (to.matched && to.matched.length > 2) {
+    to.matched.splice(1, to.matched.length - 2);
+  }
+  debugger;
   // 验证当前路由所有的匹配中是否需要有登录验证的
   if (
     to.matched.some((r) => {
@@ -54,6 +58,9 @@ router.afterEach((to: any) => {
   NProgress.done();
   // 多页控制 打开新的页面
   const pageStore = usePageStore();
+  // for (const item of to.matched) {
+  //   pageStore.keepAlivePush(item.name);
+  // }
   pageStore.open(to);
   // 更改标题
   site.title(to.meta.title);

diff --git a/src/router/source/modules/crud.ts b/src/router/source/modules/crud.ts
@@ -96,7 +96,10 @@ export const crudResources = [
             title: "ResetCrudOptions",
             name: "BasisReset",
             path: "/crud/basis/reset",
-            component: "/crud/basis/reset/index.vue"
+            component: "/crud/basis/reset/index.vue",
+            meta: {
+              cache: true
+            }
           },
           {
             title: "CrudOptions插件",

diff --git a/src/views/crud/form/base/index.vue b/src/views/crud/form/base/index.vue
@@ -3,15 +3,12 @@
     <template #header>
       <div class="title">基本表单</div>
     </template>
-    <fs-crud
-ref="crudRef" v-bind="crudBinding"
->
+    <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #form-body-top>
         <div style="display: flex">
           <div>
             <span>label宽度设置:</span>
-            <a-slider
-v-model:value="labelWidthRef" style="width: 200px" :min="40" :max="300" />
+            <a-slider v-model:value="labelWidthRef" style="width: 200px" :min="40" :max="300" />
           </div>
           <div>
             <span>label位置:</span>

diff --git a/src/views/crud/form/layout-grid/index.vue b/src/views/crud/form/layout-grid/index.vue
@@ -13,7 +13,7 @@ import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
-  name: "FormLayout",
+  name: "FormLayoutGrid",
   setup() {
     const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据