Navigation back does not work (tabs)

Ionic Framework Ionic Vue
1

I have a problem with navigation in the Ionic Vue app: navigation back does not work from subpages in the tabs-layout application. The app itself is very simple, it consists of 3 tabs pages, and 4 subpages. Schematically, it looks like this:

  • Page 1
    • Subpage 1.1
    • Subpage 1.2
  • Page 2
    • Subpage 2.1
    • Subpage 2.2
  • Page 3

I created a basic app using ionic create and extended routes and pages.

Routes file:

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/subpage1",
        component: () => import("@/views/Tab1Subpage1.vue"),
      },
      {
        path: "tab1/subpage2",
        component: () => import("@/views/Tab1Subpage2.vue"),
      },
      {
        path: "tab2",
        component: () => import("@/views/Tab2Page.vue"),
      },
      {
        path: "tab2/subpage1",
        component: () => import("@/views/Tab2Subpage1.vue"),
      },
      {
        path: "tab2/subpage2",
        component: () => import("@/views/Tab2Subpage2.vue"),
      },
      {
        path: "tab3",
        component: () => import("@/views/Tab3Page.vue"),
      },
    ],
  },
];

Page1 and Page2 source code (they are the same except of labels):

<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="tab1/subpage1">Subpage 1</ion-button>
      <ion-button router-link="tab1/subpage2">Subpage 2</ion-button>
    </ion-content>
  </ion-page>
</template>

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

Subpages look like this:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Tab 1 Pag 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true"> Tab 1 Pag 1 </ion-content>
  </ion-page>
</template>

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

I created a record of the issue, you can see it here: Ionic App - YouTube

How can I fix it? Thank you for any advice!

2

It would be helpful if you included TabsPage…

3

TabsPage is a default one:

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon aria-hidden="true" :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <ion-icon aria-hidden="true" :icon="ellipse" />
          <ion-label>Tab 2</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab3" href="/tabs/tab3">
          <ion-icon aria-hidden="true" :icon="square" />
          <ion-label>Tab 3</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';
</script>
4

Basically, it is a default tabs app created by the ionic create command with only a few modifications.
What was changed:

  • added 4 subpages;
  • updated routes (added 4 new routes to these subpages);
  • added links to these subpages from the main pages.
5

I would appreciate any ideas :pray: