修改页面缓存逻辑

package-lock.json

@@ -22,6 +22,7 @@
         "sass-loader": "^13.3.3",
         "typescript": "^5.2.2",
         "vite": "^5.0.8",
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue-tsc": "^1.8.25"
       }
     },
@@ -2478,6 +2479,13 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
@@ -2690,6 +2698,28 @@
         }
       }
     },
+    "node_modules/vite-plugin-vue-setup-extend": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
+      "integrity": "sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.2.29",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-setup-extend/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.4",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.4.tgz",

package.json

@@ -27,6 +27,7 @@
     "sass-loader": "^13.3.3",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.8.25"
   }
 }

src/components/PageLayout/Layout.vue

@@ -5,17 +5,16 @@
     </lay-header>
     <lay-layout>
       <lay-side :class="{ 'layout-side': true, 'layout-side-min': menuCollapse }">
-        <Side :list="pageData.menuList" @collapse="handleCollapse" />
+        <Side :list="pageData.menuList" @collapse="handleCollapse" @open="handleOpen" :keepAliveList="keepAliveList" />
       </lay-side>
       <lay-body class="layout-body">
-        <Tag />
+        <Tag @close="handleClose" />
         <div class="layout-main">
           <div class="layout-content">
             <router-view v-slot="{ Component, route }">
-              <keep-alive v-if="route.meta.keepAlive">
-                <component :is="Component" />
+              <keep-alive :include="keepAliveList">
+                <component :is="Component" :key="route.name" />
               </keep-alive>
-              <component v-else :is="Component" />
             </router-view>
           </div>
         </div>
@@ -31,10 +30,7 @@ import Side from "./Side.vue";
 import Tag from "./Tag.vue";
 import { get_client_info } from "@/api/index";
 import { generateAvatar } from "@/utils/index";
-import { useRoute } from "vue-router";
 
-const route = useRoute();
-console.log(route);
 interface MenuList {
   icon?: string;
   id?: number;
@@ -52,6 +48,10 @@ interface PageInfo {
 }
 const pageData = ref<PageInfo>({ avatarUrl: generateAvatar("") });
 const menuCollapse = ref<boolean>(JSON.parse(window.sessionStorage.getItem("_4L_MENU_COLLAPSE") || "false"));
+const keepAliveList = ref<Array<any>>([]);
+
+let tagList = JSON.parse(window.sessionStorage.getItem("_4L_TAG_LIST") || "[]");
+keepAliveList.value.push(...tagList.map((item: any) => item.templateName));
 
 const pageInfo = () => {
   get_client_info({}, (data: any) => {
@@ -69,10 +69,15 @@ const pageInfo = () => {
     }
   });
 };
-
 const handleCollapse = (value: boolean) => {
   menuCollapse.value = value;
 };
+const handleOpen = (value: string) => {
+  keepAliveList.value.push(value);
+};
+const handleClose = (value: string) => {
+  keepAliveList.value = keepAliveList.value.filter((item: string) => item != value);
+};
 
 pageInfo();
 </script>

src/components/PageLayout/Side.vue

@@ -33,7 +33,7 @@
 import { ref, defineProps, defineExpose, watchEffect, defineEmits } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
-const emit = defineEmits(["collapse"]);
+const emit = defineEmits(["collapse", "open"]);
 
 const router = useRouter();
 const route = useRoute();
@@ -52,8 +52,9 @@ const openKeys = ref<Array<string>>([]);
 const selectedKey = ref();
 const collapse = ref<boolean>(JSON.parse(window.sessionStorage.getItem("_4L_MENU_COLLAPSE") || "false"));
 
-defineProps({
+const prpos = defineProps({
   list: Array<MenuList>,
+  keepAliveList: Array<any>,
 });
 
 watchEffect(() => {
@@ -83,6 +84,11 @@ const setSelectedKey = () => {
 
 const jumpPage = (menu: any) => {
   router.push({ path: menu.path, query: menu.query });
+  setTimeout(() => {
+    if (route.meta.keepAlive && !prpos.keepAliveList!.includes(route.name)) {
+      emit("open", route.name);
+    }
+  }, 100);
 };
 
 setSelectedKey();

src/components/PageLayout/Tag.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="tag-wp">
     <div class="tag-list">
-      <!-- <lay-tag class="tag-item" maxWidth="100px" size="lg">
-        <lay-icon type="layui-icon-home" @click="jumpPage(homePagePath.path)" />
-      </lay-tag> -->
       <lay-tag class="tag-item" v-for="item in menuList" :closable="menuList.length > 1" maxWidth="100px" size="lg" @click="jumpPage(item)" @close="handleClose(item)">
         <span :class="{ lineheight: route.path == item.path }">{{ item.name }}</span>
       </lay-tag>
@@ -12,9 +9,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watchEffect } from "vue";
+import { ref, watchEffect, defineEmits } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
+const emit = defineEmits(["close"]);
+
 const router = useRouter();
 const route = useRoute();
 
@@ -23,11 +22,12 @@ interface MenuList {
   name: string;
   path: string;
   query: any;
+  templateName: string;
 }
 const menuList = ref<Array<MenuList>>([]);
 
 watchEffect(() => {
-  let routeInfo = { name: route.meta.title, path: route.path, query: route.query };
+  let routeInfo = { name: route.meta.title, path: route.path, query: route.query, templateName: route.name };
   window.sessionStorage.setItem("_4L_S_MENU_PATH", JSON.stringify(routeInfo));
   let routeList = window.sessionStorage.getItem("_4L_TAG_LIST");
   let tagList = routeList ? JSON.parse(routeList) : [];
@@ -43,7 +43,7 @@ watchEffect(() => {
 
 const handleClose = (menu: any) => {
   if (menu.path == route.path) {
-    let tagList = JSON.parse(window.sessionStorage.getItem("_4L_TAG_LIST") || "{}");
+    let tagList = JSON.parse(window.sessionStorage.getItem("_4L_TAG_LIST") || "[]");
     const index = tagList.findIndex((item: any) => item.path === menu.path);
     if (index == tagList.length - 1) {
       let menu = menuList.value[index - 1];
@@ -57,6 +57,7 @@ const handleClose = (menu: any) => {
   }
   menuList.value = menuList.value.filter((item: any) => item.path != menu.path);
   window.sessionStorage.setItem("_4L_TAG_LIST", JSON.stringify(menuList.value));
+  emit("close", menu.templateName);
 };
 
 const jumpPage = (menu: any) => {

src/router/routes.ts

@@ -20,7 +20,7 @@ const routes: Array<RouteRecordRaw> = [
         path: "/system/user",
         name: "SystemUser",
         component: () => import("@/views/system/user/index.vue"),
-        meta: { title: "用户管理", keepAlive: true },
+        meta: { title: "用户管理", keepAlive: true},
       },
       {
         path: "/system/webpage",

src/views/system/organization/index.vue

@@ -38,7 +38,7 @@
   <Update ref="updateRef" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="SystemOrganization">
 import { ref, reactive, getCurrentInstance } from "vue";
 import Update from "./components/Update.vue";
 import TableButton from "@/components/TableButton.vue";

src/views/system/permissions/index.vue

@@ -42,7 +42,7 @@
   </lay-loading>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="SystemPermissions">
 import { ref, reactive, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
 import { get_menu_all, set_group_menu } from "@/api";

src/views/system/user/index.vue

@@ -41,7 +41,7 @@
   <Update ref="updateRef" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="SystemUser">
 import { ref, reactive, getCurrentInstance } from "vue";
 import Update from "./components/Update.vue";
 import TableButton from "@/components/TableButton.vue";

src/views/system/webpage/index.vue

@@ -28,7 +28,7 @@
   <Operator ref="operatorRef" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="SystemWebpage">
 import { ref, reactive, getCurrentInstance } from "vue";
 import Update from "./components/Update.vue";
 import Operator from "./components/Operator.vue";

vite.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
+import VueSetupExtend from "vite-plugin-vue-setup-extend";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
   resolve: {
     alias: {
       "@": resolve(__dirname, "./src"),