fix(components): 页面跳转被拦截, 则会出现 tab 页签与页面不一致的问题

soybeanjs · Feb 8, 2023 · bd5dd2c · bd5dd2c
1 parent da521b3
commit bd5dd2c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/composables/router.ts b/src/composables/router.ts
@@ -19,9 +19,9 @@ export function useRouterPush(inSetup = true) {
     if (newTab) {
       const routerData = router.resolve(to);
       window.open(routerData.href, '_blank');
-    } else {
-      router.push(to);
+      return Promise.resolve();
     }
+    return router.push(to);
   }
 
   /** 返回上一级路由 */

diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts
@@ -114,34 +114,42 @@ export const useTabStore = defineStore('tab-store', {
      * 删除多页签
      * @param fullPath - 路由fullPath
      */
-    removeTab(fullPath: string) {
+    async removeTab(fullPath: string) {
       const { routerPush } = useRouterPush(false);
 
       const isActive = this.activeTab === fullPath;
       const updateTabs = this.tabs.filter(tab => tab.fullPath !== fullPath);
-      this.tabs = updateTabs;
+      if (!isActive) {
+        this.tabs = updateTabs;
+      }
       if (isActive && updateTabs.length) {
         const activePath = updateTabs[updateTabs.length - 1].fullPath;
-        this.setActiveTab(activePath);
-        routerPush(activePath);
+        const navigationFailure = await routerPush(activePath);
+        if (!navigationFailure) {
+          this.tabs = updateTabs;
+          this.setActiveTab(activePath);
+        }
       }
     },
     /**
      * 清空多页签(多页签首页保留)
      * @param excludes - 保留的多页签path
      */
-    clearTab(excludes: string[] = []) {
+    async clearTab(excludes: string[] = []) {
       const { routerPush } = useRouterPush(false);
 
       const homePath = this.homeTab.fullPath;
       const remain = [homePath, ...excludes];
       const hasActive = remain.includes(this.activeTab);
       const updateTabs = this.tabs.filter(tab => remain.includes(tab.fullPath));
-      this.tabs = updateTabs;
+      if (hasActive) this.tabs = updateTabs;
       if (!hasActive && updateTabs.length) {
         const activePath = updateTabs[updateTabs.length - 1].fullPath;
-        this.setActiveTab(activePath);
-        routerPush(activePath);
+        const navigationFailure = await routerPush(activePath);
+        if (!navigationFailure) {
+          this.tabs = updateTabs;
+          this.setActiveTab(activePath);
+        }
       }
     },
     /**
@@ -174,13 +182,13 @@ export const useTabStore = defineStore('tab-store', {
      * 点击单个tab
      * @param fullPath - 路由fullPath
      */
-    handleClickTab(fullPath: string) {
+    async handleClickTab(fullPath: string) {
       const { routerPush } = useRouterPush(false);
 
       const isActive = this.activeTab === fullPath;
       if (!isActive) {
-        this.setActiveTab(fullPath);
-        routerPush(fullPath);
+        const navigationFailure = await routerPush(fullPath);
+        if (!navigationFailure) this.setActiveTab(fullPath);
       }
     },
     /**