fix(vue): update props when navigating to new parameterized route (#23189)

packages/vue/src/components/IonRouterOutlet.ts

@@ -55,16 +55,31 @@ export const IonRouterOutlet = defineComponent({
     // The base url for this router outlet
     let parentOutletPath: string;
 
-    watch(matchedRouteRef, (currentValue, previousValue) => {
     /**
-       * We need to make sure that we are not re-rendering
-       * the same view if navigation changes in a sub-outlet.
-       * This is mainly for tabs when outlet 1 renders ion-tabs
-       * and outlet 2 renders the individual tab view. We don't
-       * want outlet 1 creating a new ion-tabs instance every time
-       * we switch tabs.
+     * We need to watch the route object
+     * to listen for navigation changes.
+     * Previously we had watched matchedRouteRef,
+     * but if you had a /page/:id route, going from
+     * page/1 to page/2 would not cause this callback
+     * to fire since the matchedRouteRef was the same.
      */
-      if (currentValue !== previousValue) {
+    watch([route, matchedRouteRef], ([currentRoute, currentMatchedRouteRef], [_, previousMatchedRouteRef]) => {
+      /**
+       * If the matched route ref has changed,
+       * then we need to set up a new view item.
+       * If the matched route ref has not changed,
+       * it is possible that this is a parameterized URL
+       * change such as /page/1 to /page/2. In that case,
+       * we can assume that the `route` object has changed,
+       * but we should only set up a new view item in this outlet
+       * if that last matched view item matches our current matched
+       * view item otherwise if we had this in a nested outlet the
+       * parent outlet would re-render as well as the child page.
+       */
+      if (
+        currentMatchedRouteRef !== previousMatchedRouteRef ||
+        currentRoute.matched[currentRoute.matched.length - 1] === currentMatchedRouteRef
+      ) {
         setupViewItem(matchedRouteRef);
       }
     });

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

@@ -46,7 +46,8 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/routing/:id',
-    component: () => import('@/views/RoutingParameter.vue')
+    component: () => import('@/views/RoutingParameter.vue'),
+    props: true
   },
   {
     path: '/routing/:id/view',
@@ -71,7 +72,8 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: ':id',
-        component: () => import('@/views/Folder.vue')
+        component: () => import('@/views/Folder.vue'),
+        props: true
       }
     ]
   },

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

@@ -5,19 +5,19 @@
         <ion-buttons slot="start">
           <ion-menu-button></ion-menu-button>
         </ion-buttons>
-        <ion-title>{{ folder }}</ion-title>
+        <ion-title>{{ $props.id }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">{{ folder }}</ion-title>
+          <ion-title size="large">{{ $props.id }}</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <div id="container">
-        <strong class="capitalize">{{ folder }}</strong>
+        <strong class="capitalize">{{ $props.id }}</strong>
         <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
       </div>
     </ion-content>
@@ -26,8 +26,6 @@
 
 <script lang="ts">
 import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-import { useRoute } from 'vue-router';
-import { ref, computed, watch } from 'vue';
 
 export default {
   name: 'Folder',
@@ -40,16 +38,8 @@ export default {
     IonTitle,
     IonToolbar,
   },
-  setup() {
-    const route = useRoute();
-    const folder = ref(route.params.id || 'Inbox');
-    const matchedFolder = computed(() => route.params.id);
-
-    watch(matchedFolder, () => {
-      folder.value = matchedFolder.value as string;
-    })
-
-    return { folder }
+  props: {
+    id: { type: String, default: 'Inbox' }
   }
 }
 </script>

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

@@ -18,8 +18,11 @@
 
       <ion-button id="parameter-view" :router-link="'/routing/' + $route.params.id + '/view'">Go to Single View</ion-button>
 
+      <ion-button router-link="/routing/abc">Go to Parameter Page ABC</ion-button>
+      <ion-button router-link="/routing/xyz">Go to Parameter Page XYZ</ion-button>
+
       <div class="ion-padding" id="parameter-value">
-        {{ $route.params.id }}
+        {{ $props.id }}
       </div>
     </ion-content>
   </ion-page>
@@ -39,6 +42,9 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  props: {
+    id: { type: String, default: 'my default' }
+  },
   components: {
     IonButton,
     IonBackButton,

packages/vue/test-app/tests/e2e/specs/tabs.js

@@ -275,11 +275,15 @@ describe('Tabs - Swipe to Go Back', () => {
     cy.ionPageVisible('tab1')
   });
 
-  it('should swipe and abort', () => {
+  // TODO: Flaky if test runner is slow
+  // Delays between gesture movements
+  // cause swipe back gesture to think
+  // velocity is higher than it actually is
+  /*it('should swipe and abort', () => {
     cy.ionSwipeToGoBack();
     cy.ionPageHidden('home');
     cy.ionPageVisible('tab1');
-  });
+  });*/
 
   it('should swipe and go back to home', () => {
     cy.ionSwipeToGoBack(true);

packages/vue/test-app/tests/unit/routing.spec.ts

@@ -358,4 +358,39 @@ describe('Routing', () => {
     const cmpAgain = wrapper.findComponent(Page1);
     expect(cmpAgain.props()).toEqual({ title: 'abc Title' });
   });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/pull/23189
+  it('should update props on a parameterized url', async () => {
+    const Page = {
+      props: {
+        id: { type: String, default: 'Default ID' }
+      },
+      components: { IonPage },
+      template: `<ion-page>{{ $props.id }}</ion-page>`
+    }
+
+    const router = createRouter({
+      history: createWebHistory(process.env.BASE_URL),
+      routes: [
+        { path: '/page/:id', component: Page, props: true },
+        { path: '/', redirect: '/page/1' }
+      ]
+    });
+
+    router.push('/');
+    await router.isReady();
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router, IonicVue]
+      }
+    });
+
+    const page = wrapper.findComponent(Page);
+    expect(page.props()).toEqual({ id: '1' });
+
+    router.push('/page/2');
+    await waitForRouter();
+
+    expect(page.props()).toEqual({ id: '2' });
+  });
 });