fix(vue): correctly show ion-back-button when going back (#22260)

resolves #22217

packages/vue/test-app/src/router/index.ts

@@ -5,11 +5,6 @@ import Home from '../views/Home.vue'
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/home'
-  },
-  {
-    path: '/home',
-    name: 'Home',
     component: Home
   },
   {
@@ -27,11 +22,19 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Slides',
     component: () => import('@/views/Slides.vue')
   },
+  {
+    path: '/default-href',
+    component: () => import('@/views/DefaultHref.vue')
+  },
   {
     path: '/navigation',
     name: 'Navigation',
     component: () => import('@/views/Navigation.vue')
   },
+  {
+    path: '/navigation/child',
+    component: () => import('@/views/NavigationChild.vue')
+  },
   {
     path: '/nested',
     name: 'RouterOutlet',
@@ -57,7 +60,17 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue')
+        component: () => import('@/views/Tab1.vue'),
+        children: [
+          {
+            path: 'child-one',
+            component: () => import('@/views/Tab1ChildOne.vue')
+          },
+          {
+            path: 'child-two',
+            component: () => import('@/views/Tab1ChildTwo.vue')
+          }
+        ]
       },
       {
         path: 'tab2',

packages/vue/test-app/src/views/DefaultHref.vue

@@ -0,0 +1,45 @@
+<template>
+  <ion-page data-pageid="defaulthref">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
+        <ion-title>DefaultHref</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">DefaultHref</ion-title>
+        </ion-toolbar>
+      </ion-header>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonBackButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  }
+});
+</script>

packages/vue/test-app/src/views/Home.vue

@@ -26,6 +26,9 @@
         <ion-item router-link="/navigation" id="navigation">
           <ion-label>Navigation</ion-label>
         </ion-item>
+        <ion-item router-link="/default-href" id="default-href">
+          <ion-label>Default Href</ion-label>
+        </ion-item>
         <ion-item router-link="/nested" id="nested">
           <ion-label>Nested Router Outlet</ion-label>
         </ion-item>

packages/vue/test-app/src/views/Navigation.vue

@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons>
-          <ion-back-button default-href="/"></ion-back-button>
+          <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Navigation</ion-title>
       </ion-toolbar>
@@ -19,6 +19,10 @@
       <ion-item button @click="setRouteParams" id="route-params">
         <ion-label>Set Route Parameters</ion-label>
       </ion-item>
+
+      <ion-item button router-link="/navigation/child" id="child">
+        <ion-label>Go to Child Page</ion-label>
+      </ion-item>
     </ion-content>
   </ion-page>
 </template>

packages/vue/test-app/src/views/NavigationChild.vue

@@ -0,0 +1,63 @@
+<template>
+  <ion-page data-pageid="navigationchild">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Navigation Child</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Navigation Child</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Navigation Child Page
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  name: 'NavigationChild',
+  components: {
+    IonBackButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  },
+  setup() {
+    const router = useRouter();
+    const setRouteParams = () => {
+      router.push({
+        query: {
+          search: 'liamwashere'
+        }
+      });
+    }
+
+    return { setRouteParams }
+  }
+});
+</script>

packages/vue/test-app/src/views/Tab1.vue

@@ -16,16 +16,20 @@
       </ion-header>
 
       <ExploreContainer name="Tab 1 page" />
+
+      <ion-item router-link="tab1/child-one" id="child-one">
+        <ion-label>Go to Tab 1 Child 1</ion-label>
+      </ion-item>
     </ion-content>
   </ion-page>
 </template>
 
 <script>
-import { IonButtons, IonBackButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import { IonButtons, IonBackButton, IonPage, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 
 export default  {
   name: 'Tab1',
-  components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
+  components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent, IonPage }
 }
 </script>

packages/vue/test-app/src/views/Tab1ChildOne.vue

@@ -0,0 +1,52 @@
+<template>
+  <ion-page data-pageid="tab1childone">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Tab 1 Child 1</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Tab 1 Child 1</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-item router-link="child-two" id="child-two">
+        <ion-label>Tab 1 Child 2</ion-label>
+      </ion-item>
+
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import {
+  IonButtons,
+  IonBackButton,
+  IonPage,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonToolbar,
+  IonTitle,
+  IonContent
+} from '@ionic/vue';
+
+export default  {
+  components: {
+    IonButtons,
+    IonBackButton,
+    IonPage,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonToolbar,
+    IonTitle,
+    IonContent
+  }
+}
+</script>

packages/vue/test-app/src/views/Tab1ChildTwo.vue

@@ -0,0 +1,44 @@
+<template>
+  <ion-page data-pageid="tab1childtwo">
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Tab 1 Child 2</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Tab 1 Child 2</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import {
+  IonButtons,
+  IonBackButton,
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent
+} from '@ionic/vue';
+
+export default  {
+  components: {
+    IonButtons,
+    IonBackButton,
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent
+  }
+}
+</script>

packages/vue/test-app/src/views/Tab2.vue

@@ -1,5 +1,5 @@
 <template>
-  <ion-page>
+  <ion-page data-pageid="tab2">
     <ion-header>
       <ion-toolbar>
         <ion-title>Tab 2</ion-title>
@@ -11,7 +11,7 @@
           <ion-title size="large">Tab 2</ion-title>
         </ion-toolbar>
       </ion-header>
-      
+
       <ExploreContainer name="Tab 2 page" />
     </ion-content>
   </ion-page>
@@ -25,4 +25,4 @@ export default  {
   name: 'Tab2',
   components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
 }
-</script>
+</script>