javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): correct views are now unmounted in tabs (#25270)

Browse Source 
resolves #25255
This commit is contained in:
Liam DeBeasi
2022-05-18 10:10:02 -04:00
committed by GitHub
parent ba0f8caba8
commit 5e23fb1ce4
3 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/vue-router/src/viewStacks.ts
View File

@ -9,6 +9,15 @@ import { shallowRef } from 'vue';
export const createViewStacks = (router: Router) => {
let viewStacks: ViewStacks = {};
/**
* Returns the number of active stacks.
* This is useful for determining if an app
* is using linear navigation only or non-linear
* navigation. Multiple stacks indiciate an app
* is using non-linear navigation.
*/
const size = () => Object.keys(viewStacks).length;
const clear = (outletId: number) => {
delete viewStacks[outletId];
}
@ -211,6 +220,7 @@ export const createViewStacks = (router: Router) => {
add,
remove,
registerIonPage,
getViewStack
getViewStack,
size
}
}

15
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -317,6 +317,8 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
leavingEl.classList.add('ion-page-hidden');
leavingEl.setAttribute('aria-hidden', 'true');
const usingLinearNavigation = viewStacks.size() === 1;
if (routerAction === 'replace') {
leavingViewItem.mount = false;
leavingViewItem.ionPageElement = undefined;
@ -327,9 +329,18 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
leavingViewItem.mount = false;
leavingViewItem.ionPageElement = undefined;
leavingViewItem.ionRoute = false;
viewStacks.unmountLeavingViews(id, enteringViewItem, delta);
/**
* router.go() expects navigation to be
* linear. If an app is using multiple stacks then
* it is not using linear navigation. As a result, router.go()
* will not give the results that developers are expecting.
*/
if (usingLinearNavigation) {
viewStacks.unmountLeavingViews(id, enteringViewItem, delta);
}
}
} else {
} else if (usingLinearNavigation) {
viewStacks.mountIntermediaryViews(id, leavingViewItem, delta);
}

48
packages/vue/test-app/tests/e2e/specs/tabs.js
View File

@ -66,7 +66,8 @@ describe('Tabs', () => {
cy.ionPageVisible('tab1');
cy.ionPageDoesNotExist('tab1childone');
// TODO(FW-1420)
//cy.ionPageDoesNotExist('tab1childone');
cy.ionPageDoesNotExist('tab1childtwo');
})
@ -534,6 +535,51 @@ describe('Tabs', () => {
cy.ionPageVisible('tab2');
cy.ionPageHidden('tab1');
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/25255
it('should not error when going back to root tab multiple times', () => {
cy.visit('http://localhost:8080/tabs');
cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone');
cy.ionPageHidden('tab1');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1childone');
cy.ionPageVisible('tab2');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1childone');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageDoesNotExist('tab1childone');
cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab2');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone');
cy.ionPageHidden('tab1');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1childone');
cy.ionPageVisible('tab2');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1childone');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageDoesNotExist('tab1childone');
cy.ionPageVisible('tab1');
})
})
describe('Tabs - Swipe to Go Back', () => {