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?

[GC-Mark]

@liamdebeasi I don't want to be one of those people, but I was wondering if there is any progress on this issue. Seems like very common use case, and one that we come up against again and again.

Thanks

[liamdebeasi]

I do not have an update, but I have added to our v6 milestone.

[GC-Mark]

Thanks, i had a stab at making a fix this morning, but it got the point where I had to start cloning pages and I quickly got out of my depth.

Will keep an eye out for the fix 👍

[liamdebeasi]

Hi everyone,

I have a fix for this in #23525 and will likely merge the PR tomorrow. I have included a dev build below for anyone who would like to test.

Please note that this is a Framework v6 dev build and is subject to the breaking changes noted in https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md#version-6x. This fix depends on a change made in Ionic Vue v6 and cannot be easily backported to v5, so this is going to be a v6-only fix.

npm install @ionic/[email protected] @ionic/[email protected]

[liamdebeasi]

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

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