fix(vue-router): keep back working after replacing a page in tabs

packages/vue-router/src/router.ts

@@ -475,9 +475,15 @@ export const createIonRouter = (
           currentHistoryPosition
         );
       } else if (incomingRouteParams.routerAction === "pop") {
+        /**
+         * Back can skip several entries, e.g. router.go(-3) after a
+         * tab switch, so use the delta to find the page we left. A
+         * back done with router.replace has no delta and keeps the
+         * one-step lookup.
+         */
         leavingLocationInfo = locationHistory.current(
           initialHistoryPosition,
-          currentHistoryPosition + 1
+          currentHistoryPosition - (delta ?? -1)
         );
 
         /**
@@ -709,7 +715,12 @@ export const createIonRouter = (
 
           routeInfo.lastPathname =
             currentRouteInfo?.pathname || routeInfo.lastPathname;
-          routeInfo.pushedByRoute = pushedByRoute;
+          /**
+           * A root replace resets the stack, so keeping pushedByRoute
+           * would show a back button with nowhere to go.
+           */
+          routeInfo.pushedByRoute =
+            routeInfo.routerDirection === "root" ? undefined : pushedByRoute;
           /**
            * Prefer the direction/animation the caller specified on
            * the navigate call; fall back to the leaving route's

packages/vue/src/hooks/router.ts

@@ -44,7 +44,7 @@ export const useIonRouter = (): UseIonRouterResult => {
     navigate(location, "forward", "push", routerAnimation);
 
   const replace = (location: any, routerAnimation?: AnimationBuilder) =>
-    navigate(location, "root", "replace", routerAnimation);
+    navigate(location, "none", "replace", routerAnimation);
 
   const back = (routerAnimation?: AnimationBuilder) => goBack(routerAnimation);
 

packages/vue/test/base/tests/e2e/playwright/replace-direction.spec.ts

@@ -44,14 +44,20 @@ test.describe('useIonRouter.navigate with routerAction="replace"', () => {
     expect(await readCurrentDirection(page)).toBe('forward');
   });
 
-  test('default useIonRouter.replace() keeps direction "root"', async ({ page }) => {
+  // The default replace keeps the stack beneath the replaced page.
+  test('default useIonRouter.replace() should use direction "none"', async ({ page }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/30617',
+    });
+
     await page.goto('/');
     await ionPageVisible(page, 'home');
 
     await page.waitForFunction(() => Boolean((window as any).debugIonRouter));
     await page.evaluate(() => (window as any).debugIonRouter.replace('/routing'));
     await ionPageVisible(page, 'routing');
 
-    expect(await readCurrentDirection(page)).toBe('root');
+    expect(await readCurrentDirection(page)).toBe('none');
   });
 });

packages/vue/test/base/tests/e2e/playwright/tabs-replace.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from './utils/test-base';
+import { ionBackClick, ionPageVisible, ionPageDoesNotExist, ionRouterNavigate, ionRouterReplace, routerPush, tabClick } from './utils/test-utils';
+
+/**
+ * Replacing a page in a tab stack should keep the pages beneath it.
+ *
+ * @see https://github.com/ionic-team/ionic-framework/issues/30617
+ */
+test.describe('Tabs: replacing a page inside a tab stack', () => {
+  test('should return to the tab root on back after a tab switch and a forward replace', async ({ page }) => {
+    await page.goto('/tabs/tab1');
+    await ionPageVisible(page, 'tab1');
+
+    await routerPush(page, '/tabs/tab1/view1');
+    await ionPageVisible(page, 'tab1view1');
+
+    await tabClick(page, 'tab2');
+    await ionPageVisible(page, 'tab2');
+
+    await tabClick(page, 'tab1');
+    await ionPageVisible(page, 'tab1view1');
+
+    await ionRouterNavigate(page, '/tabs/tab1/view2', 'forward', 'replace');
+    await ionPageVisible(page, 'tab1view2');
+
+    await ionBackClick(page, 'tab1view2');
+
+    await expect.poll(() => new URL(page.url()).pathname).toBe('/tabs/tab1');
+    await ionPageVisible(page, 'tab1');
+    await ionPageDoesNotExist(page, 'tab1view2');
+  });
+
+  test('should return to the tab root on back after useIonRouter.replace', async ({ page }) => {
+    await page.goto('/tabs/tab1');
+    await ionPageVisible(page, 'tab1');
+
+    await routerPush(page, '/tabs/tab1/view1');
+    await ionPageVisible(page, 'tab1view1');
+
+    await ionRouterReplace(page, '/tabs/tab1/view2');
+    await ionPageVisible(page, 'tab1view2');
+
+    await ionBackClick(page, 'tab1view2');
+
+    await expect.poll(() => new URL(page.url()).pathname).toBe('/tabs/tab1');
+    await ionPageVisible(page, 'tab1');
+    await ionPageDoesNotExist(page, 'tab1view2');
+  });
+
+  // A root replace resets the stack, so there's nothing to go back to.
+  test('should not show a back button after a root replace', async ({ page }) => {
+    await page.goto('/tabs/tab1');
+    await ionPageVisible(page, 'tab1');
+
+    await routerPush(page, '/tabs/tab1/view1');
+    await ionPageVisible(page, 'tab1view1');
+
+    await ionRouterNavigate(page, '/tabs/tab1/view2', 'root', 'replace');
+    await ionPageVisible(page, 'tab1view2');
+
+    await expect(page.locator('.ion-page[data-pageid="tab1view2"] ion-back-button')).toBeHidden();
+  });
+});

packages/vue/test/base/tests/unit/router-outlet.spec.ts

@@ -80,7 +80,7 @@ describe('Routing', () => {
       expect.anything(),
       expect.objectContaining({
         // "root" and "none" both resolve to duration=0 via hasRootDirection.
-        direction: "root",
+        direction: "none",
         duration: 0,
         animationBuilder: undefined
       })
@@ -142,7 +142,7 @@ describe('Routing', () => {
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
-        direction: "root",
+        direction: "none",
         duration: undefined,
         animationBuilder: animation
       })