fix(vue): tapping the active tab button now correctly resets the tab stack (#24935)

resolves #24934

packages/vue-router/src/locationHistory.ts

@@ -92,16 +92,39 @@ export const createLocationHistory = () => {
    * and every entry that appears after it.
    */
   const clearHistory = (routeInfo?: RouteInfo) => {
-    Object.keys(tabsHistory).forEach(key => {
-      tabsHistory[key] = [];
-    });
-
     if (routeInfo) {
+
+      /**
+       * If there is no route index in locationHistory
+       * then there will not be any route index in
+       * tabs either.
+       */
       const existingRouteIndex = locationHistory.findIndex(r => r.position === routeInfo.position);
       if (existingRouteIndex === -1) return;
 
       locationHistory.splice(existingRouteIndex);
+
+      /**
+       * We also need to search the current tab
+       * to correctly reset the individual tab
+       * stack. We should not clear the entire
+       * tab stack as that means we will lose
+       * a reference to the root tab route.
+       */
+      const { tab } = routeInfo;
+      const tabHistory = tabsHistory[tab];
+      if (tab && tabHistory) {
+        const existingTabRouteIndex = tabHistory.findIndex(r => r.position === routeInfo.position);
+        if (existingTabRouteIndex === -1) return;
+
+        tabsHistory[tab].splice(existingTabRouteIndex);
+      }
+
     } else {
+      Object.keys(tabsHistory).forEach(key => {
+        tabsHistory[key] = [];
+      });
+
       locationHistory.length = 0;
     }
   }

packages/vue-router/src/router.ts

@@ -409,13 +409,22 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
     router.push(routerLink);
   }
 
-  const resetTab = (tab: string, originalHref: string) => {
+  const resetTab = (tab: string) => {
+    /**
+     * Resetting the tab should go back
+     * to the initial view in the tab stack.
+     * It should not push a new instance of the
+     * root tab page onto the stack.
+     *
+     * To do this, we get the initial view in the
+     * tab stack and subtract the position of that
+     * entry from our current position. From there
+     * we call router.go() to move us back the
+     * appropriate number of positions.
+     */
     const routeInfo = locationHistory.getFirstRouteInfoForTab(tab);
     if (routeInfo) {
-      const newRouteInfo = { ...routeInfo };
-      newRouteInfo.pathname = originalHref;
-      incomingRouteParams = { ...newRouteInfo, routerAction: 'pop', routerDirection: 'back' };
-      router.push({ path: newRouteInfo.pathname, query: parseQuery(newRouteInfo.search) });
+      router.go(routeInfo.position - currentHistoryPosition);
     }
   }