The swipe back gesture and ion-back-button do not work fine in tabs with Ionic 6 & Vue

I found that swipe back gesture and ion-back-button do not work fine when using the simplest ion-tabs, so I create a simple project from ionic starter (tabs) to show the problem.

1. When I navigate to a common page, it’s all OK like the above.

2. But when I navigate to a page which contains tabs, the ion-back-button is not shown as expected，the swipe gesture works fine. But after I clicked the tab2 or tab3 and back to tab1, the ion-back-button is shown.

3. The biggest problem is that no matter when, in tab1 and tab2, the ion-back-button cannot be shown and the swipe back gesture cannot be used.

In the official demo, ion-tabs does not have this problem: Ionic Kitchen Sink](https://docs-demo.ionic.io/)

So I would like to ask anyone who has encountered a similar situation and how should I solve it?
Thank you all in advance

I have uploaded the code to github: ionic6-vue-tabs (github.com)

I just add a home page and test page to the starter of tabs like:
Home.vue

<template>
   <ion-page>
       <ion-content style="text-align: center;line-height: 400%;">
           <router-link to="/test">test link</router-link>
           <br/>
           <router-link to="/tabs/tab1">tab link</router-link>
           <br/>
       </ion-content>
   </ion-page>
</template>
<script lang="ts" setup>
import { IonPage, IonContent } from '@ionic/vue';
import { RouterLink } from 'vue-router';

</script>

Test.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Test</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content >
      
    
      <ExploreContainer name="Tab 1 page" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts" setup>
import {IonBackButton,IonButtons, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';


</script>

And edit the 3 tab pages to add the ion-back-button in the ion-header:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content >
      
    
      <ExploreContainer name="Tab 1 page" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts" setup>
import {IonBackButton,IonButtons, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';


</script>

1 post - 1 participant

Read full topic