fix(vue-router): reset tab with memory history (#31511)

Issue number: resolves #29785

---------

## What is the current behavior?

Currently, with `createMemoryHistory`, tapping the active tab from a
child page leaves the child on screen. Memory history doesn't store a
position in `history.state`, so the offset `resetTab()` computes is
`NaN` and `router.go(NaN)` goes nowhere. On 9.x it also throws `Cannot
read properties of undefined (reading '0')`.

## What is the new behavior?

When there's no position to traverse, `resetTab()` now replaces the
current entry with the tab's `href`, the same fallback it already uses
after a deep load. It uses the tab's `href` rather than the first route
recorded for the tab, because after a deep load onto a child that first
route is the child itself. Web and hash history always have a numeric
position, so they're unaffected.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

The new tests are in `memory.spec.ts`, since the Vue test app uses web
history and can't reproduce this. They cover resetting from a child
page, resetting after a deep load onto a child, and replacing the child
entry rather than pushing over it.

Author: ShaneK

packages/vue-router/src/router.ts

@@ -827,6 +827,16 @@ export const createIonRouter = (
     const routeInfo = locationHistory.getFirstRouteInfoForTab(tab);
     if (routeInfo) {
       const delta = routeInfo.position! - currentHistoryPosition;
+      /**
+       * Memory history doesn't store a position in `history.state`, so
+       * `delta` is NaN and there's nothing to traverse. Replace instead.
+       */
+      if (Number.isNaN(delta)) {
+        if (originalHref) {
+          handleNavigate(originalHref, "pop", "back", undefined, tab);
+        }
+        return;
+      }
       if (delta !== 0) {
         router.go(delta);
         return;

packages/vue/test/base/tests/unit/memory.spec.ts

@@ -10,6 +10,9 @@ import {
   IonApp,
   IonRouterOutlet,
   IonPage,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
 } from '@ionic/vue';
 import { waitForRouter } from './utils';
 
@@ -112,4 +115,115 @@ describe('createMemoryHistory', () => {
     await waitForRouter();
     expect(router.currentRoute.value.path).toBe('/page3');
   });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/29785
+  describe('tapping the active tab', () => {
+    const Tabs = {
+      components: { IonPage, IonTabs, IonTabBar, IonTabButton, IonRouterOutlet },
+      template: `
+        <ion-page>
+          <ion-tabs>
+            <ion-router-outlet></ion-router-outlet>
+            <ion-tab-bar slot="bottom">
+              <ion-tab-button tab="tab1" href="/tabs/tab1">Tab 1</ion-tab-button>
+              <ion-tab-button tab="tab2" href="/tabs/tab2">Tab 2</ion-tab-button>
+            </ion-tab-bar>
+          </ion-tabs>
+        </ion-page>
+      `,
+    };
+    const Tab1 = {
+      components: { IonPage },
+      template: '<ion-page>Tab 1</ion-page>',
+    };
+    const Tab1Child = {
+      components: { IonPage },
+      template: '<ion-page>Tab 1 Child</ion-page>',
+    };
+    const Tab2 = {
+      components: { IonPage },
+      template: '<ion-page>Tab 2</ion-page>',
+    };
+
+    const createTabsRouter = () =>
+      createRouter({
+        history: createMemoryHistory(process.env.BASE_URL),
+        routes: [
+          { path: '/', redirect: '/tabs/tab1' },
+          {
+            path: '/tabs/',
+            component: Tabs,
+            children: [
+              { path: 'tab1', component: Tab1 },
+              { path: 'tab1/child', component: Tab1Child },
+              { path: 'tab2', component: Tab2 },
+            ],
+          },
+        ],
+      });
+
+    const tapTab = async (wrapper: ReturnType<typeof mount>, tab: string) => {
+      const button = wrapper
+        .findAllComponents(IonTabButton)
+        .find((b) => b.props('tab') === tab)!;
+      await button.trigger('click');
+      await waitForRouter();
+    };
+
+    it('should return to the tab root from a child page', async () => {
+      const router = createTabsRouter();
+
+      router.push('/tabs/tab1');
+      await router.isReady();
+      const wrapper = mount(App, {
+        global: { plugins: [router, IonicVue] },
+      });
+      await waitForRouter();
+
+      router.push('/tabs/tab1/child');
+      await waitForRouter();
+      expect(router.currentRoute.value.path).toBe('/tabs/tab1/child');
+
+      await tapTab(wrapper, 'tab1');
+
+      expect(router.currentRoute.value.path).toBe('/tabs/tab1');
+    });
+
+    it('should return to the tab root when the app started on a child page', async () => {
+      const router = createTabsRouter();
+
+      router.push('/tabs/tab1/child');
+      await router.isReady();
+      const wrapper = mount(App, {
+        global: { plugins: [router, IonicVue] },
+      });
+      await waitForRouter();
+
+      await tapTab(wrapper, 'tab1');
+
+      expect(router.currentRoute.value.path).toBe('/tabs/tab1');
+    });
+
+    it('should replace the child page entry rather than push over it', async () => {
+      const router = createTabsRouter();
+
+      router.push('/tabs/tab1');
+      await router.isReady();
+      const wrapper = mount(App, {
+        global: { plugins: [router, IonicVue] },
+      });
+      await waitForRouter();
+
+      router.push('/tabs/tab1/child');
+      await waitForRouter();
+
+      await tapTab(wrapper, 'tab1');
+      expect(router.currentRoute.value.path).toBe('/tabs/tab1');
+
+      router.back();
+      await waitForRouter();
+
+      expect(router.currentRoute.value.path).toBe('/tabs/tab1');
+    });
+  });
 })