bug: ionic vue, not updating params when getting viewitem on route with params

After version 5.5.2 Only the first time a route is rendered does the prop get updated. Subsequent calls to the same component with a different route property continue to only render with the original property. This manifests itself when utilizing a list, detail, back-to-list pattern (for example Client List & Client Detail in a CRM app).

Ionic version: 5.5.3 and onward. 5.5.2 worked correctly.

Current behavior: router.push(‘/mycomponent/1’) - the first time the component recognizes the prop as “1”. router.push(‘/mycomponent/2’) - the second time the component continues to only see prop as “1”

Expected behavior: The props should be updated so that the component can update the view based on the revised route

Related code: Sample code based on the default example app

Router:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue'
import TestView from '../views/TestView.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/test/:id',
    name: 'TestView',
    component: TestView,
    props: true,
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Home

<template>
	<ion-page>
		<ion-content :fullscreen="true">
			<div id="container">
				<div @click="$router.push(`/test/1`)" style="cursor: pointer; margin-bottom: 10px">Test ID 1</div>
				<div @click="$router.push(`/test/2`)" style="cursor: pointer; margin-bottom: 10px">Test ID 2</div>
				<div @click="$router.push(`/test/3`)" style="cursor: pointer; margin-bottom: 10px">Test ID 3</div>
			</div>
		</ion-content>
	</ion-page>
</template>

<script lang="ts">
import {IonContent, IonPage} from '@ionic/vue';
import {defineComponent} from 'vue';

export default defineComponent({
	name: 'Home',
	components: {
		IonContent,
		IonPage,
	},
});
</script>

Test View

<template>
	<ion-page
	><ion-header>
		<ion-toolbar>
			<ion-buttons slot="start">
				<ion-back-button></ion-back-button>
			</ion-buttons>
			<ion-title>ID: {{id}}</ion-title>
		</ion-toolbar>
	</ion-header>
	</ion-page>
</template>

<script>
import {defineComponent} from 'vue';
import {
	IonPage,
	IonHeader,
	IonToolbar,
	IonButtons,
	IonTitle,
	IonBackButton,
} from '@ionic/vue';

export default defineComponent({
	name: 'TestView',

	props: ['id'],

	components: {
		IonPage,
		IonHeader,
		IonToolbar,
		IonButtons,
		IonTitle,
		IonBackButton,
	},
});
</script>

[geoffreymina13]

Thanks for working so quickly, Liam! Function mode is working now in 5.7.0-dev.202103151643.8d8c811.

Awesome first experience submitting an issue to you guys. Thanks for all you do!

[liamdebeasi]

Ok thanks. Can you give this dev build a shot and see if the props get updated using function mode?

npm install @ionic/vue@5.7.0-dev.202103151643.8d8c811 @ionic/vue-router@5.7.0-dev.202103151643.8d8c811