bug: Ion-tabs navigation stack breaking

[typefox09]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When creating a tab based navigation stack (I've used the default template as the example), routing between stacks is breaking.

Video example:

https://user-images.githubusercontent.com/61811299/229324577-3fbf3b84-d68b-45a8-81e5-c8ff2bc9b20c.mov

Example routes (Vuejs):

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs/',
    component: TabsPage,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1Page.vue')
      },
      {
        path: 'tab1/page2',
        component: () => import('@/views/Tab1Page2.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2Page.vue')
      },
      {
        path: 'tab2/page2',
        component: () => import('@/views/Tab2Page2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3Page.vue')
      }
    ]
  }
]

Example route flow:

1. Start off at home tab
2. Navigate to /tabs/tab1/page2'
3. Click tab 2 (open new nav stack)
4. Navigate to /tabs/tab2/page2'
5. Clack tab 1 (return to original nav stack)
6. Press Ion-back-button (no default href), this returns to tab 1 home (as expected)
7. Click tab 2 (return to 2nd stack)
8. Press ion-back-button (no default href). Nothing now happens, it does not return to tab 2 home
9. Press tab 1, tab 2 home is shown instead of tab 1. Continue to click tab 1 and nothing happens

For reference:

Tab1Page:

<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 router-link="/tabs/tab1/page2">Visit Tab 1 Page 2</ion-button>
    </ion-content>
  </ion-page>
</template>

Tab2Page:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 2</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 2</ion-title>
        </ion-toolbar>
      </ion-header>

     <ion-button router-link="/tabs/tab2/page2">Visit Tab 2 Page 2</ion-button>
    </ion-content>
  </ion-page>
</template>

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

Expected Behavior

Tab 2 page 2 should return to tab 2 page 1

Steps to Reproduce

1. Create blank ionic tabs template
2. Add Tab1Page 2 template (include standard ion-back-button)
3. Add ion-button with router-link to Tab1Page, with route to Tab1Page2
4. Add Tab2Page 2 template (include standard ion-back-button)
5. Add ion-button with router-link to Tab2Page, with route to Tab2Page2

Add appropriate routes on router

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.6 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.0.0

Capacitor:

Capacitor CLI : 4.7.3 @capacitor/android : not installed @capacitor/core : 4.7.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v14.20.0 (/opt/homebrew/Cellar/node@14/14.20.0/bin/node) npm : 6.14.17 OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/25213.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.