Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Apr 25, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c1d2b2a
ci(): add concurrency restrictions
liamdebeasi Apr 20, 2022
705f437
test(vue): add failing test
liamdebeasi Apr 20, 2022
2e7255d
fix(vue): do not do a replace operation within locationHistory.add
liamdebeasi Apr 20, 2022
56717e3
chore(): remove only
liamdebeasi Apr 20, 2022
c8ddea2
Merge remote-tracking branch 'origin/main' into FW-1370
liamdebeasi Apr 21, 2022
1139fed
Merge branch 'main' into FW-1370
liamdebeasi Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions packages/vue-router/src/locationHistory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ export const createLocationHistory = () => {

const add = (routeInfo: RouteInfo) => {
switch (routeInfo.routerAction) {
case "replace":
replaceRoute(routeInfo);
break;
case "pop":
pop(routeInfo);
break;
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions packages/vue/test-app/src/views/RouterOutlet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -19,6 +20,7 @@

<script lang="ts">
import {
IonBackButton,
IonHeader,
IonButtons,
IonButton,
Expand All @@ -31,6 +33,7 @@ import { defineComponent } from 'vue';

export default defineComponent({
components: {
IonBackButton,
IonHeader,
IonButtons,
IonButton,
Expand Down
28 changes: 22 additions & 6 deletions packages/vue/test-app/tests/e2e/specs/nested.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
})
})