fix(vue): going back with query params now goes to correct view (#22350)

resolves #22324

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

@@ -38,6 +38,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/routing/child',
     component: () => import('@/views/RoutingChild.vue')
   },
+  {
+    path: '/routing/item/:id/view',
+    component: () => import('@/views/RoutingParameter.vue')
+  },
   {
     path: '/navigation',
     component: () => import('@/views/Navigation.vue')

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

@@ -23,6 +23,10 @@
       <ion-item button router-link="/routing/child" id="child">
         <ion-label>Go to Child Page</ion-label>
       </ion-item>
+
+      <ion-item button router-link="/routing/item/123/view" id="item">
+        <ion-label>Go to Parameterized Route</ion-label>
+      </ion-item>
     </ion-content>
   </ion-page>
 </template>

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

@@ -0,0 +1,49 @@
+<template>
+  <ion-page data-pageid="routingparameter">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Routing Parameter</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Routing Parameter</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Routing Parameter Page: {{ $route.params.id }}
+      </div>
+    </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>