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

fix(vue): mount correct views when navigating (#24056)

Browse Source 
resolves #23914
This commit is contained in:
Liam DeBeasi
2021-10-14 11:28:36 -04:00
committed by GitHub
parent a09d7d4ab6
commit 24659a527a
6 changed files with 125 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -214,7 +214,7 @@ export const IonRouterOutlet = defineComponent({
const handlePageTransition = async () => {
const routeInfo = ionRouter.getCurrentRouteInfo();
const { routerDirection, routerAction, routerAnimation, prevRouteLastPathname } = routeInfo;
const { routerDirection, routerAction, routerAnimation, prevRouteLastPathname, delta } = routeInfo;
const enteringViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id, usingDeprecatedRouteSetup);
let leavingViewItem = viewStacks.findLeavingViewItemByRouteInfo(routeInfo, id, true, usingDeprecatedRouteSetup);
@ -286,10 +286,10 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
leavingViewItem.mount = false;
leavingViewItem.ionPageElement = undefined;
leavingViewItem.ionRoute = false;
viewStacks.unmountLeavingViews(id, enteringViewItem, leavingViewItem);
viewStacks.unmountLeavingViews(id, enteringViewItem, delta);
}
} else {
viewStacks.mountIntermediaryViews(id, enteringViewItem, leavingViewItem);
viewStacks.mountIntermediaryViews(id, leavingViewItem, delta);
}
fireLifecycle(leavingViewItem.vueComponent, leavingViewItem.vueComponentRef, LIFECYCLE_DID_LEAVE);

100
packages/vue/test-app/tests/unit/routing.spec.ts
View File

@ -441,4 +441,104 @@ describe('Routing', () => {
expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(2);
});
it('should not mount intermediary components when delta is 1', async () => {
const Page = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page2 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page3 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/page', component: Page },
{ path: '/page2', component: Page2 },
{ path: '/page3', component: Page3 },
{ path: '/', redirect: '/page' }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(App, {
global: {
plugins: [router, IonicVue]
}
});
expect(wrapper.findComponent(Page).exists()).toBe(true);
router.push('/page2');
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(true);
router.back();
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(false);
router.push('/page3');
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(false);
expect(wrapper.findComponent(Page3).exists()).toBe(true);
});
it('should unmount intermediary components when using router.go', async () => {
const Page = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page2 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page3 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/page', component: Page },
{ path: '/page2', component: Page2 },
{ path: '/page3', component: Page3 },
{ path: '/', redirect: '/page' }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(App, {
global: {
plugins: [router, IonicVue]
}
});
router.push('/page2');
await waitForRouter();
router.push('/page3');
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(true);
expect(wrapper.findComponent(Page3).exists()).toBe(true);
router.go(-2);
await waitForRouter();
expect(wrapper.findComponent(Page).exists()).toBe(true);
expect(wrapper.findComponent(Page2).exists()).toBe(false);
expect(wrapper.findComponent(Page3).exists()).toBe(false);
});
});