diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts index 415155bd2f..079f2861a8 100644 --- a/packages/vue-router/src/router.ts +++ b/packages/vue-router/src/router.ts @@ -238,7 +238,19 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) => const lastRoute = locationHistory.getCurrentRouteInfoForTab(routeInfo.tab); routeInfo.pushedByRoute = lastRoute?.pushedByRoute; } else if (routeInfo.routerAction === 'replace') { - const currentRouteInfo = locationHistory.last(); + + /** + * When replacing a route, we want to make sure we select the current route + * that we are on, not the last route in the stack. The last route in the stack + * is not always the current route. + * Example: + * Given the following history: /page1 --> /page2 + * Doing router.go(-1) would bring you to /page1. + * If you then did router.replace('/page3'), /page1 should + * be replaced with /page3 even though /page2 is the last + * item in the stack/ + */ + const currentRouteInfo = locationHistory.current(initialHistoryPosition, currentHistoryPosition); /** * If going from /home to /child, then replacing from diff --git a/packages/vue/test-app/tests/e2e/specs/routing.js b/packages/vue/test-app/tests/e2e/specs/routing.js index 89dac44fea..2e7a3dee51 100644 --- a/packages/vue/test-app/tests/e2e/specs/routing.js +++ b/packages/vue/test-app/tests/e2e/specs/routing.js @@ -379,6 +379,27 @@ describe('Routing', () => { cy.ionPageVisible('routingparameterview'); cy.ionPageDoesNotExist('routingchild'); }) + + // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24226 + it('should correctly replace a route after popping', () => { + cy.visit('http://localhost:8080'); + + cy.routerPush('/routing'); + cy.ionPageVisible('routing'); + cy.ionPageHidden('home'); + + cy.routerGo(-1); + cy.ionPageVisible('home'); + cy.ionPageDoesNotExist('routing'); + + cy.routerReplace('/inputs'); + cy.ionPageVisible('inputs'); + cy.ionPageDoesNotExist('home'); + + cy.routerPush('/'); + cy.ionPageVisible('home'); + cy.ionPageHidden('inputs'); + }) }); describe('Routing - Swipe to Go Back', () => {