diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts index 71fc08c248..755820f214 100644 --- a/packages/vue-router/src/router.ts +++ b/packages/vue-router/src/router.ts @@ -120,7 +120,12 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) => * will go back in a linear fashion. */ prevInfo.pathname === routeInfo.pushedByRoute && - routeInfo.tab === '' && prevInfo.tab === '' + + /** + * Tab info can be undefined or '' (empty string) + * both are false-y values, so we can just use !. + */ + !routeInfo.tab && !prevInfo.tab ) ) { router.back(); diff --git a/packages/vue/test-app/tests/unit/memory.spec.ts b/packages/vue/test-app/tests/unit/memory.spec.ts new file mode 100644 index 0000000000..8a6ce3dd7d --- /dev/null +++ b/packages/vue/test-app/tests/unit/memory.spec.ts @@ -0,0 +1,76 @@ +import { mount } from '@vue/test-utils'; +import { createRouter, createMemoryHistory } from '@ionic/vue-router'; +import { + IonContent, + IonHeader, + IonToolbar, + IonBackButton, + IonicVue, + IonApp, + IonRouterOutlet, + IonPage, +} from '@ionic/vue'; +import { waitForRouter } from './utils'; + +const App = { + components: { IonApp, IonRouterOutlet }, + template: '', +} + +describe('createMemoryHistory', () => { + beforeAll(() => { + (HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn(); + }); + it('should not error when going back with memory router', async () => { + const PageTemplate = { + template: ` + + + + + + + + + `, + components: { IonPage, IonContent, IonHeader, IonToolbar, IonBackButton } + } + + const router = createRouter({ + history: createMemoryHistory(process.env.BASE_URL), + routes: [ + { path: '/', component: PageTemplate }, + { path: '/page2', component: PageTemplate }, + { path: '/page3', component: PageTemplate } + ] + }); + const push = jest.spyOn(router, 'back') + + router.push('/'); + await router.isReady(); + const wrapper = mount(App, { + global: { + plugins: [router, IonicVue] + } + }); + + router.push('/page2'); + await waitForRouter(); + + router.push('/page3'); + await waitForRouter(); + + + const backButtons = wrapper.findAllComponents(IonBackButton); + const pageTwoButton = backButtons[1]; + const pageThreeButton = backButtons[2]; + + await pageThreeButton.trigger('click'); + await waitForRouter(); + + await pageTwoButton.trigger('click'); + await waitForRouter(); + + expect(push).toHaveBeenCalledTimes(2); + }); +})