Router.navigate() pop/back not working after 2 "jumps" on tabs

Hello !

I’m facing an issue when navigating between tabs and trying to pop the current history stack after multiple tabs navigations.

My website navigation is made of following pages :

  • (home page) /event-selector
  • /events/:eventId/* Event tabbed page with following children :
    • /events/:eventId/schedule
    • /events/:eventId/favorites
    • /events/:eventId/feedbacks
    • /events/:eventId/infos

Here is my router config :

const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: '/event-selector' },
  { path: '/event-selector', component: EventSelectorPage },
  { path: '/events/:eventId', component: () => import('@/views/event/_BaseEventPages.vue'), children: [
    { path: '', redirect: (route) => `/events/${route.params.eventId}/schedule` },
    { path: 'schedule', component: () => import('@/views/event/SchedulePage.vue') },
    { path: 'favorites', component: () => import('@/views/event/FavoritesPage.vue') },
    { path: 'feedbacks', component: () => import('@/views/event/FeedbacksPage.vue') },
    { path: 'infos', component: () => import('@/views/event/InfosPage.vue') },

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),

Navigation from /event-selector to /events/:eventId/* page is made through a push + forward router navigation :

async function selectEvent(eventId: EventId) {
    await fetchConferenceDescriptor(eventId);


On every /events/:eventId/* pages, I have a header component allowing to navigate back to the /event-selector page with pop + back router navigation :

function backToEventsList() {

    router.navigate('/event-selector', 'back', 'pop')

My tabs are declared normally, using <ion-tab-button> with href navigation links :

      <ion-tab-bar slot="bottom">
        <ion-tab-button v-for="(tab, index) in tabs" :key="index"
            :tab="" @click="(ev: Event) => tabClicked(tab, ev)" :href="tab.url">
          <ion-icon aria-hidden="true" :src="selectedTab === ? tab.selectedIcon : tab.icon"/>
          <ion-label>{{ tab.label }}</ion-label>

<script setup lang="ts">
const tabs = [{
  id: 'schedule', url: `/events/${eventId.value.value}/schedule`, label: 'Schedule',
  icon: '/assets/icons/line/calendar-line.svg',
  selectedIcon: '/assets/icons/solid/calendar.svg',
}, {

Now, my problem :

  • Following navigation is :white_check_mark: :
    –(select event | push)–> [event schedule]
    –(back button clicked | pop) → [event-selector]

  • Following navigation is :white_check_mark: too :
    –(select event | push)–> [event schedule]
    –(switch on tab favorites | ??? (not sure if push or replace)) → [event favorites]
    –(back button clicked | pop) → [event-selector]

  • Now, if I had a third tab navigation, it is failing :x: :
    –(select event | push)–> [event schedule]
    –(switch on tab favorites | ??? (not sure if push or replace)) → [event favorites]
    –(switch on tab feedback | ??? (not sure if push or replace)) → [event feedbacks]
    –(back button clicked | pop) → :x: [event-selector]

  • Note that the problem seems related to the number of different visited tab pages : if I keep 3 jumps on tabs, but I only visit 2 (and not 3) different tab pages, then it is :white_check_mark: too :
    –(select event | push)–> [event schedule]
    –(switch on tab favorites | ??? (not sure if push or replace)) → [event favorites]
    –(switch back tab schedule | ??? (not sure if push or replace)) → [event schedule]
    –(back button clicked | pop) → [event-selector]

A video of these navigation examples can be found here : ionic vue tabs navigation pop - Google Drive

Do you have any idea about a misusage on my side (I’m pretty new with both Ionic and Vue) ?
Or should I raise an issue on Github ?

Thanks in advance for your support,

it might help you to get some help on this if you can duplicate the issue with a less complex project and if you put the project in codesandbox or stackblitz making it easier for someone to see the issue and step through the code