fix(vue): improve handling of parameterized urls (#22360)

resolves #22359

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

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

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

@@ -24,8 +24,16 @@
         <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 button router-link="/routing/abc" id="parameter-abc">
+        <ion-label>Go to Parameter Page ABC</ion-label>
+      </ion-item>
+
+      <ion-item button router-link="/routing/xyz" id="parameter-xyz">
+        <ion-label>Go to Parameter Page XYZ</ion-label>
+      </ion-item>
+
+      <ion-item button router-link="/routing/123/view" id="parameter-view-item">
+        <ion-label>Go to Parameterized Page View</ion-label>
       </ion-item>
     </ion-content>
   </ion-page>

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

@@ -16,8 +16,10 @@
         </ion-toolbar>
       </ion-header>
 
-      <div class="ion-padding">
-        Routing Parameter Page: {{ $route.params.id }}
+      <ion-button id="parameter-view" :router-link="'/routing/' + $route.params.id + '/view'">Go to Single View</ion-button>
+
+      <div class="ion-padding" id="parameter-value">
+        {{ $route.params.id }}
       </div>
     </ion-content>
   </ion-page>
@@ -25,6 +27,7 @@
 
 <script lang="ts">
 import {
+  IonButton,
   IonBackButton,
   IonButtons,
   IonContent,
@@ -37,6 +40,7 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   components: {
+    IonButton,
     IonBackButton,
     IonButtons,
     IonContent,

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

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