fix(vue): navigating between parameterized pages now results in page transition (#23525)

resolves #22662

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

@@ -90,12 +90,9 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/Tab1.vue'),
       },
       {
-        path: 'tab1/child-one',
-        component: () => import('@/views/Tab1ChildOne.vue')
-      },
-      {
-        path: 'tab1/child-two',
-        component: () => import('@/views/Tab1ChildTwo.vue')
+        path: 'tab1/:id',
+        component: () => import('@/views/Tab1Parameter.vue'),
+        props: true
       },
       {
         path: 'tab2',

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

@@ -1,5 +1,5 @@
 <template>
-  <ion-page data-pageid="routingparameter">
+  <ion-page :data-pageid="'routingparameter-' + $props.id">
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons>

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

@@ -17,7 +17,7 @@
 
       <ExploreContainer name="Tab 1 page" />
 
-      <ion-item button router-link="/tabs/tab1/child-one" id="child-one">
+      <ion-item button router-link="/tabs/tab1/childone" id="child-one">
         <ion-label>Go to Tab 1 Child 1</ion-label>
       </ion-item>
       <ion-item button router-link="/nested" id="nested">

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

@@ -1,44 +0,0 @@
-<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/Tab1Parameter.vue

@@ -1,21 +1,25 @@
 <template>
-  <ion-page data-pageid="tab1childone">
+  <ion-page :data-pageid="'tab1' + $props.id">
     <ion-header>
       <ion-toolbar>
         <ion-buttons>
           <ion-back-button></ion-back-button>
         </ion-buttons>
-        <ion-title>Tab 1 Child 1</ion-title>
+        <ion-title>Tab 1 Child {{ $props.id }}</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-title size="large">Tab 1 Child {{ $props.id }}</ion-title>
         </ion-toolbar>
       </ion-header>
 
-      <ion-item router-link="child-two" id="child-two">
+      <ion-item router-link="childone" id="child-one">
+        <ion-label>Tab 1 Child 1</ion-label>
+      </ion-item>
+
+      <ion-item router-link="childtwo" id="child-two">
         <ion-label>Tab 1 Child 2</ion-label>
       </ion-item>
 
@@ -37,6 +41,7 @@ import {
 } from '@ionic/vue';
 
 export default  {
+  props: { id: String },
   components: {
     IonButtons,
     IonBackButton,