globalTabs增加缓存功能

src/layouts/BasicLayout.vue

@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouterStore } from '@/stores/router'
+
+const routerStore = useRouterStore()
+</script>
 
 <template>
   <el-container class="layout-container">
@@ -12,7 +16,11 @@
       <el-main style="padding: 0">
         <global-tabs></global-tabs>
         <div style="padding: var(--main-padding); height: calc(100% - 41px)">
-          <router-view></router-view>
+          <router-view v-slot="{ Component }">
+            <keep-alive :include="routerStore.keepAliveRouter">
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
         </div>
       </el-main>
       <!-- <el-footer>

src/router/asyncRouter.ts

@@ -42,7 +42,9 @@ const asyncRouter: RouteRecordRaw[] = [
         component: () => import('@/views/system/User.vue'),
         meta: {
           title: '用户管理',
-          icon: 'user'
+          icon: 'user',
+          keepAlive: true,
+          viewName: 'User'
         }
       },
       {
@@ -51,7 +53,9 @@ const asyncRouter: RouteRecordRaw[] = [
         component: () => import('@/views/system/Role.vue'),
         meta: {
           title: '角色管理',
-          icon: 'avatar'
+          icon: 'avatar',
+          keepAlive: true,
+          viewName: 'Role'
         }
       },
       {

src/router/router.d.ts

@@ -6,6 +6,8 @@ declare module 'vue-router' {
     role?: any[]
     title: string
     icon?: string
+    keepAlive?: boolean
+    viewName?: string
   }
 }
 

src/stores/router.ts

@@ -60,12 +60,26 @@ function filterMenuRouter(router: RouteRecordRaw[]) {
   return accessedRouters
 }
 
+const keepAliveRouter: any = []
+function filterKeepAliveRouter(router: RouteRecordRaw[]) {
+  router.forEach(item => {
+    if (item.meta?.keepAlive || item.children?.some(child => child.meta?.keepAlive)) {
+      keepAliveRouter.push(item.meta?.viewName)
+    }
+    if (item.children?.length) {
+      filterKeepAliveRouter(item.children)
+    }
+  })
+  return keepAliveRouter
+}
+
 export const useRouterStore = defineStore({
   id: 'router',
   state: () => ({
     menuRouter: <any>[],
     asyncRouter: <any>[],
-    dynamicRouter: <any>[]
+    dynamicRouter: <any>[],
+    keepAliveRouter: <any>[]
   }),
   actions: {
     generatorRouter(role?: any[]): Promise<RouteRecordRaw[]> {
@@ -73,6 +87,8 @@ export const useRouterStore = defineStore({
         this.asyncRouter = role ? filterAsyncRouter(asyncRouter, role) : asyncRouter
         // this.asyncRouter = generatorDynamicRouter(this.dynamicRouter)
         this.menuRouter = filterMenuRouter(this.asyncRouter)
+        this.keepAliveRouter = filterKeepAliveRouter(this.menuRouter)
+        console.log(this.keepAliveRouter)
         resolve(this.asyncRouter)
       })
     },