feat: tabs不渲染关联的路由缓存和高亮

src/layout/components/Header/components/system-settings/index.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="flex-row">
           <div>标签栏</div>
-          <a-switch v-model="isTabs" />
+          <a-switch v-model="isTabs" @change="tabsChange" />
         </div>
         <div class="flex-row">
           <div>底部栏</div>
@@ -50,15 +50,31 @@
 
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
+import { useRoutesListStore } from "@/store/modules/route-list";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { currentlyRoute } from "@/router/route-output";
 const themeStore = useThemeConfig();
+const routerStore = useRoutesListStore();
 const { collapsed, isBreadcrumb, isTabs, isFooter } = storeToRefs(themeStore);
+const { tabsList, cacheRoutes } = storeToRefs(routerStore);
+const route = useRoute();
 const props = defineProps({
   systemOpen: {
     type: Boolean,
     default: false
   }
 });
+// 是否关闭tabs栏
+// 如果关闭，那么所有tabs全部取消、所有页面缓存全部取消
+// 如果开启，那么添加当前路由到tabs
+const tabsChange = (e: Boolean) => {
+  if (!e) {
+    tabsList.value = [];
+    cacheRoutes.value = [];
+  } else {
+    currentlyRoute(route.name as string);
+  }
+};
 const emits = defineEmits(["systemCancel"]);
 const handleOk = () => {
   emits("systemCancel");

src/router/index.ts

@@ -50,7 +50,7 @@ router.beforeEach(async (to, from, next) => {
     // 3、去登录页，有token，直接重定向到home页
     next("/home");
     // 项目内的跳转，处理跳转路由高亮
-    currentlyRoute(to);
+    currentlyRoute(to.name as string);
   } else {
     // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
     const routeStore = useRoutesListStore(pinia);
@@ -65,7 +65,7 @@ router.beforeEach(async (to, from, next) => {
       // 动态路由添加过走这里，直接放行
       next();
       // 项目内的跳转，处理跳转路由高亮
-      currentlyRoute(to);
+      currentlyRoute(to.name as string);
     }
   }
 });

src/router/route-output.ts

@@ -86,9 +86,9 @@ export const roleBase = (roles: Array<string>) => {
  * 统一处理所有的路由跳转：当前路由高亮、tabs栏数据
  * 处理项目内跳转，存入当前跳转路由和tabs标签栏数据
  * menu和tabs以及手动刷新浏览器等功能只需要跳转即可，缓存和高亮的逻辑这边负责
- * @param {object} to 需要跳转的路由
+ * @param {object} name 需要跳转的路由
  */
-export const currentlyRoute = (to: any) => {
+export const currentlyRoute = (name: string) => {
   const themeStore = useThemeConfig();
   const { isTabs } = storeToRefs(themeStore);
   const store = useRoutesListStore(pinia);
@@ -99,13 +99,13 @@ export const currentlyRoute = (to: any) => {
   }
   // 跳转路由是有权限的，缓存跳转路由
   const { findLinearArray } = useRoutingMethod();
-  const find = findLinearArray(to.name);
+  const find = findLinearArray(name);
   if (find === undefined) return;
   // 存入当前路由-高亮
   store.setCurrentRoute(find);
   // 存入tabs栏数据：如果系统配置里允许展示标签栏则存入
   if (isTabs.value) store.setTabs(find);
-  // 是否缓存路由
-  if (!find.meta.keepAlive) return;
+  // 是否缓存路由 || 是否渲染tabs，符合任意条件则不缓存路由
+  if (!find.meta.keepAlive || !isTabs.value) return;
   store.setRouteNames(find.name); // 缓存路由name
 };