Problem with tab navigation

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 :

image913×270 45.8 KB

I am doing something wrong ?

Thanks for your help

1 post - 1 participant

Read full topic