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),
routes
})
Navigation from /event-selector to /events/:eventId/* page is made through a push + forward router navigation :
async function selectEvent(eventId: EventId) {
await fetchConferenceDescriptor(eventId);
router.push(`/events/${eventId.value}`);
}
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() {
unsetCurrentSchedule();
router.navigate('/event-selector', 'back', 'pop')
}
My tabs are declared normally, using <ion-tab-button> with href navigation links :
<template>
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button v-for="(tab, index) in tabs" :key="index"
:tab="tab.id" @click="(ev: Event) => tabClicked(tab, ev)" :href="tab.url">
<ion-icon aria-hidden="true" :src="selectedTab === tab.id ? tab.selectedIcon : tab.icon"/>
<ion-label>{{ tab.label }}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
<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',
}, {
....
}];
</script>
Now, my problem :
-
Following navigation is
:
[event-selector]
–(select event | push)–> [event schedule]
–(back button clicked | pop) → [event-selector] -
Following navigation is
too :
[event-selector]
–(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
:
[event-selector]
–(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) → [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
too :
[event-selector]
–(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 issue.mov - 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,