fix(vue): ensure that only tab pages get added to the tab navigation stack (#25045)

resolves #24859
This commit is contained in:
Liam DeBeasi
2022-04-12 10:22:36 -04:00
committed by GitHub
parent da89684877
commit a0054a7cbd
2 changed files with 46 additions and 11 deletions

View File

@ -65,7 +65,6 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
let currentRouteInfo: RouteInfo;
let incomingRouteParams: RouteParams;
let currentTab: string | undefined;
// TODO types
let historyChangeListeners: any[] = [];
@ -238,8 +237,7 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
if (action === 'replace') {
incomingRouteParams = {
routerAction: 'replace',
routerDirection: 'none',
tab: currentTab
routerDirection: 'none'
}
} else if (action === 'pop') {
const routeInfo = locationHistory.current(initialHistoryPosition, currentHistoryPosition - delta);
@ -254,16 +252,15 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
} else {
incomingRouteParams = {
routerAction: 'pop',
routerDirection: 'none',
tab: currentTab
routerDirection: 'none'
}
}
}
if (!incomingRouteParams) {
incomingRouteParams = {
routerAction: 'push',
routerDirection: direction || 'forward',
tab: currentTab
routerDirection: direction || 'forward'
}
}
}
@ -288,7 +285,6 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
}
if (isPushed) {
routeInfo.tab = leavingLocationInfo.tab;
routeInfo.pushedByRoute = (leavingLocationInfo.pathname !== '') ? leavingLocationInfo.pathname : undefined;
} else if (routeInfo.routerAction === 'pop') {
const route = locationHistory.findLastLocation(routeInfo);
@ -460,9 +456,18 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
}
}
/**
* This method is invoked by the IonTabs component
* during a history change callback. It is responsible
* for ensuring that tabbed routes have the correct
* "tab" field in its routeInfo object.
*
* IonTabs will determine if the current route
* is in tabs and assign it the correct tab.
* If the current route is not in tabs,
* then IonTabs will not invoke this.
*/
const handleSetCurrentTab = (tab: string) => {
currentTab = tab;
const ri = { ...locationHistory.last() };
if (ri.tab !== tab) {
ri.tab = tab;

View File

@ -435,7 +435,7 @@ describe('Tabs', () => {
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432
it('should correct replace a route in a child tab route', () => {
it('should correctly replace a route in a child tab route', () => {
cy.visit('http://localhost:8080/tabs');
cy.routerPush('/tabs/tab1/childone');
@ -446,6 +446,36 @@ describe('Tabs', () => {
cy.ionPageVisible('tab1');
cy.ionPageDoesNotExist('tab1childone');
})
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24859
it('should go back to the root page after navigating between tab and non tab outlets', () => {
cy.visit('http://localhost:8080');
cy.routerPush('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.ionPageHidden('home');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab2');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
cy.ionPageHidden('tabs');
cy.routerPush('/tabs/tab1');
cy.ionPageVisible('tabs');
cy.ionPageVisible('tab1');
cy.ionPageHidden('routing');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab2');
cy.ionBackClick('tab2');
cy.ionPageVisible('home');
cy.ionPageDoesNotExist('tabs');
});
})
describe('Tabs - Swipe to Go Back', () => {