fix(vue): replacing routes across nested outlets preserves previous route info (#25171)

resolves #25017

packages/vue-router/src/locationHistory.ts

@@ -6,9 +6,6 @@ export const createLocationHistory = () => {
 
   const add = (routeInfo: RouteInfo) => {
     switch (routeInfo.routerAction) {
-      case "replace":
-        replaceRoute(routeInfo);
-        break;
       case "pop":
         pop(routeInfo);
         break;
@@ -41,13 +38,6 @@ export const createLocationHistory = () => {
     }
   }
 
-  const replaceRoute = (routeInfo: RouteInfo) => {
-    const routeInfos = getTabsHistory(routeInfo.tab);
-    routeInfos && routeInfos.pop();
-    locationHistory.pop();
-    addRoute(routeInfo);
-  }
-
   const pop = (routeInfo: RouteInfo) => {
     const tabHistory = getTabsHistory(routeInfo.tab);
     let ri;

packages/vue/test-app/src/views/RouterOutlet.vue

@@ -3,6 +3,7 @@
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
+          <ion-back-button id="routeroutlet-back-button" text="Back to main outlet"></ion-back-button>
           <ion-button id="inbox" router-link="/nested/inbox" router-direction="root">Inbox</ion-button>
           <ion-button id="trash" router-link="/nested/trash" router-direction="root">Trash</ion-button>
           <ion-button id="outbox" router-link="/nested/outbox" router-direction="root">Outbox</ion-button>
@@ -19,6 +20,7 @@
 
 <script lang="ts">
 import {
+  IonBackButton,
   IonHeader,
   IonButtons,
   IonButton,
@@ -31,6 +33,7 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   components: {
+    IonBackButton,
     IonHeader,
     IonButtons,
     IonButton,

packages/vue/test-app/tests/e2e/specs/nested.js

@@ -4,10 +4,6 @@ describe('Nested', () => {
     cy.ionPageVisible('nestedchild');
   });
 
-  it('should show first page', () => {
-    cy.ionPageVisible('nestedchild');
-  });
-
   it('should go to second page', () => {
     cy.get('#nested-child-two').click();
     cy.ionPageVisible('nestedchildtwo');
@@ -21,8 +17,6 @@ describe('Nested', () => {
   });
 
   it('should go navigate across nested outlet contexts', () => {
-    cy.ionPageVisible('nestedchild');
-
     cy.get('#nested-tabs').click();
 
     cy.ionPageHidden('routeroutlet');
@@ -34,3 +28,25 @@ describe('Nested', () => {
     cy.ionPageVisible('routeroutlet');
   });
 })
+
+describe('Nested - Replace', () => {
+  it('should replace a route but still be able to go back to main outlet', () => {
+    cy.visit('http://localhost:8080');
+
+    cy.routerPush('/nested');
+    cy.ionPageHidden('home');
+    cy.ionPageVisible('nestedchild');
+
+    cy.routerReplace('/nested/two');
+    cy.ionPageDoesNotExist('nestedchild');
+    cy.ionPageVisible('nestedchildtwo');
+
+    /**
+     * ionBackClick does not handle nested pages
+     * with multiple back buttons
+     */
+    cy.get('#routeroutlet-back-button').click();
+    cy.ionPageDoesNotExist('nestedchildtwo');
+    cy.ionPageVisible('home');
+  })
+})