Hello,
I expriment some difficulties with the tab navigation. Maybe I do something wrong, but I don’t see why.
I have a view (Tab) with a <ion-tabs> and some tabs views (Tab1,2) and another view (Other).
In my Tab1, I have a link to Other. In Other, I have a link to Tab2
When I do the following flow :
Tab1 -> Other -> Tab2 -> Tab1 -> Other, the Other view is not displayed.
It seems the page is on the DOM but the Tab view is still displayed above (both views have the same z-index value).
Tab view :
<template>
<ion-page>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" href="/tabs/tab1">
<ion-icon :icon="triangle" />
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" href="/tabs/tab2">
<ion-icon :icon="ellipse" />
<ion-label>Tab 2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
Tab 1 view
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-button @click="goTo('/other')">Go to other</ion-button>
</ion-content>
</ion-page>
</template>
<script lang="js">
import {IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar} from '@ionic/vue';
export default {
components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonButton},
methods: {
goTo(target) {
this.$router.push(target);
}
},
}
</script>
Other
<template>
<ion-page>
<ion-content>
Other
<ion-button @click="goTo('/tabs/tab1')">Go to tab1</ion-button>
<ion-button @click="goTo('/tabs/tab2')">Go to tab2</ion-button>
</ion-content>
</ion-page>
</template>
<script lang="js">
import {IonButton, IonContent, IonPage} from '@ionic/vue';
export default {
components: {IonPage, IonButton, IonContent},
setup() {
return {}
},
methods: {
goTo(target) {
this.$router.push(target);
}
}
}
</script>
router/index.js
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Tabs from '../views/Tabs.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/tabs/tab1'
},
{
path: '/tabs/',
component: Tabs,
children: [
{
path: '',
redirect: '/tabs/tab1'
},
{
path: 'tab1',
component: () => import('@/views/Tab1.vue')
},
{
path: 'tab2',
component: () => import('@/views/Tab2.vue')
},
]
},
{
path: '/other',
component: () => import('@/views/Other.vue')
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
My DOM after the navigation :
I am doing something wrong ?
Thanks for your help