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

[geoffreymina13]

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>

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.7.0-dev.202103151518.3345220 @ionic/vue-router@5.7.0-dev.202103151518.3345220

[geoffreymina13]

The issue appears to be partially resolved using the DEV version of 5.7. If we pass our props using function mode, we still experience the issue. If we go back to using the standard "props: true" then the router gets the updated ID.

Still Broken:

{
		path: '/clients/:id',
		name: 'clientDetail',
		component: () => import(/* webpackChunkName: "client" */ './ClientDetail.vue'),
		title: 'Client Detail',
		props: (route) => ({
			id: route.params.id,
			focus: route.query.focus,
		}),
	},

Working as intended

{
		path: '/clients/:id',
		name: 'clientDetail',
		component: () => import(/* webpackChunkName: "client" */ './ClientDetail.vue'),
		title: 'Client Detail',
		props: true,
	},

[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

[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]

Thanks for the issue. This has been resolved via #23049, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.