bug: ionic vue navigating to the same page with a different parameter should still result in a transition

[liamdebeasi]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

Given a route of /page/:id, going from /page/1 to page/2 does not result in a nav transition. The new page content simply appears.

Expected behavior:

I would expect that there is a nav transition.

Related code:

We need to implement the following logic in Ionic Vue, similar to how Ionic React does it:

ionic-framework/packages/react-router/src/ReactRouter/StackManager.tsx

Lines 166 to 175 in 91aaaab

	// If a page is transitioning to another version of itself
	// we clone it so we can have an animation to show
	const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, true);
	if (match) {
	const newLeavingElement = clonePageElement(leavingViewItem.ionPageElement.outerHTML);
	if (newLeavingElement) {
	this.routerOutletElement.appendChild(newLeavingElement);
	await runCommit(enteringViewItem.ionPageElement, newLeavingElement);
	this.routerOutletElement.removeChild(newLeavingElement);

insert short code snippets here

Other information:

See: #22658 (comment) and #22658 (comment)

[boboldehampsink]

+1

[beneverard]

On top of the details I added in #22931, I'm also finding that the component $route object always reflects the current route, and not the route that spawned the component.

This is to say that components that remain mounted for ease of state management (according to Ionics docs) are susceptible to their base data changing, and in my case, this causes errors as the component relies on route metadata that is incorrectly changed.

Note in this screenshot (details of this example in #22931) that the main /home component is populated with route information from the active /message component.

I hope this adds some more context to the bug, as before I assume this is related and will continue to add any nuances I discover.

[wsamoht]

Does anyone know of a workaround for this? I am having the issue mentioned in #22931 where I am navigating to the same route with different parameters but the content doesn't change (the URL does).

[GC-Mark]

Does anyone know of a workaround for this? I am having the issue mentioned in #22931 where I am navigating to the same route with different parameters but the content doesn't change (the URL does).

Depending if you want a page transition or not (this example won't), we had to watch for changes of the route parameters along the lines of this...

const route = useRoute();
let id = route.params.id

watchEffect(() => {
  if (route.params.id != id) {
    // trigger page refresh/trigger payload refresh
  }
});

(i don't have access to my actual code at the moment, but that was roughly the gist of it)

[wsamoht]

Awesome, thanks! Your code sparked a solution for me. I had already converted router-link to a click event on the button trying to figure out a solution. I just added updating my data properties with the new route parameters. Why I didn't think of that originally I don't know :) I have computed properties that are loading the data from Vuex with the data properties.

<ion-button @click="navigateToLesson(trackId, previousLessonId)">Previous</ion-button>
<ion-button @click="navigateToLesson(trackId, nextLessonId)">Next</ion-button>

async navigateToLesson(trackId: number, lessonId: number): Promise<void> {
    await this.$router.push({
        name: 'tabs.training.study.lesson',
        params: { trackId: trackId, lessonId: lessonId },
    })

    this.trackId = parseInt(this.$route.params.trackId.toString())
    this.lessonId = parseInt(this.$route.params.lessonId.toString())
}

[ryoji-sagara]

I've been using the /page/:id setting when transitioning from /page/1 to page/2.
I'm looking for a way to not refresh the data on the same page.
I would like it to behave like an application that generates the page DOM of /page/2 independently of the page DOM of /page/1 and also has page transition animation.
Or is there a way to do that?