fix(tabs): close tab without navigation

修复多标签在某些情况下关闭页签不会跳转路由的问题 fixed: #1131

fix(tabs): close tab without navigation
修复多标签在某些情况下关闭页签不会跳转路由的问题 fixed: #1131
无木
1 parent cecdfbaf
Showing 2 changed files with 35 additions and 11 deletions
CHANGELOG.zh_CN.md
src/store/modules/multipleTab.ts
@@ -7,6 +7,7 @@
   - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
   - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题
 - **BasicTree** 修复节点插槽不起作用的问题
+- **其它** 修复多标签在某些情况下关闭页签不会跳转路由的问题
  
 ## 2.7.2(2021-09-14)
  
@@ -26,6 +26,15 @@ function handleGotoPage(router: Router) {
   go(unref(router.currentRoute).path, true);
 }
  
+const getToTarget = (tabItem: RouteLocationNormalized) => {
+  const { params, path, query } = tabItem;
+  return {
+    params: params || {},
+    path,
+    query: query || {},
+  };
+};
+
 const cacheTab = projectSetting.multiTabsSetting.cache;
  
 export const useMultipleTabStore = defineStore({
@@ -147,15 +156,6 @@ export const useMultipleTabStore = defineStore({
     },
  
     async closeTab(tab: RouteLocationNormalized, router: Router) {
-      const getToTarget = (tabItem: RouteLocationNormalized) => {
-        const { params, path, query } = tabItem;
-        return {
-          params: params || {},
-          path,
-          query: query || {},
-        };
-      };
-
       const close = (route: RouteLocationNormalized) => {
         const { fullPath, meta: { affix } = {} } = route;
         if (affix) {
@@ -196,13 +196,36 @@ export const useMultipleTabStore = defineStore({
         toTarget = getToTarget(page);
       }
       close(currentRoute.value);
-      replace(toTarget);
+      await replace(toTarget);
     },
  
     // Close according to key
     async closeTabByKey(key: string, router: Router) {
       const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key);
-      index !== -1 && this.closeTab(this.tabList[index], router);
+      if (index !== -1) {
+        await this.closeTab(this.tabList[index], router);
+        const { currentRoute, replace } = router;
+        // 检查当前路由是否存在于tabList中
+        const isActivated = this.tabList.findIndex((item) => {
+          return item.fullPath === currentRoute.value.fullPath;
+        });
+        // 如果当前路由不存在于TabList中，尝试切换到其它路由
+        if (isActivated === -1) {
+          let pageIndex;
+          if (index > 0) {
+            pageIndex = index - 1;
+          } else if (index < this.tabList.length - 1) {
+            pageIndex = index + 1;
+          } else {
+            pageIndex = -1;
+          }
+          if (pageIndex >= 0) {
+            const page = this.tabList[index - 1];
+            const toTarget = getToTarget(page);
+            await replace(toTarget);
+          }
+        }
+      }
     },
  
     // Sort the tabs