Router.push 2 components

I have a ion-menu with the list of router-link.

When I push to another route(Profile) for the first time all is well
First
and when I push again to another route(Product) for the second time it pushes the new route(Product) and the last visited route(Profile).
Second

Is this a bug?

same. I have told them on the Github issue of the router bug, the bug seems like no one care.

so my final solution is set beforeRouterEnter and Leave, detect the page going, and change immediately
or router page step by step…

The pages are not being “re-pushed”, they are being preserved inside of IonRouterOutlet. This is by design. Ionic Framework keeps old views in the DOM so that we can do the swipe to go back gesture on iOS and avoid having to reinitialize tabs with every tab switch.

3 Likes

It calls both the created methods cause to call loadingCtrl show twice.

Hard to say what the issue is. Can you provide a GitHub repo?

Here’s my code

hello @reuelcardz, I had check your router and didn’t figure out any problem.

This is homepage:

This one is Order page.

and this one is Products page:

you are fix bug? :thinking:

What do you mean “you are fix bug? :thinking:” and the way you push the routes are fine.
Mine are like this.

Order Page

Products Page

@reuelcardz I thought you already fix the bug. :grinning:

which devVue version of chrome extension you are using for? :joy:

I am using the beta version, cause of ionic view wasn’t support or maybe some case was not call out by older dev vue version. So I must use beta vue one to debug my code.

For vue 2 I recommend using devtool vue old version (that one is okay)
But for ionic is using vue 3 to building project, so you must install vue beta. ( from my experience testing )

I added both. maybe this problem is on me I think. maybe i’ll try to reinstall the cli and see the result.

hum… :thinking:

How about reset or reinstall the extension?
I think the problem is about the extension, I think you should double-check on this.

Does you use typescript inside your project?

No I converted ts to js and I don’t think the issue is the devtools. I already face the issue before I installed the devtools.

I uploaded a video in GDrive. Just try and check it evidence.mp4 - Google Drive

Dear @reuelcardz, I found the issue you said about last night.

The issue may be about in app.vue influent ionRouterView when I make some logic code in <script setup SFC or just simple setup() {} for something else.

Or maybe I try to make an Suspense inside the app.vue then I got the issue as you have said the issue before. This one issue I believed it a bug, you may post this one issue to their Github, I believed they will take a time to look back at the problem.

And I believed this issue will gonna be influence the router, like render a wrong view page or freeze view page render or maybe other router issue case.

and here we go ~ https://github.com/ionic-team/ionic-framework/issues

Hello @reuelcardz, are you still in there?
I solved this problem with change a little about mountIntermediaryViews
from https://github.com/ionic-team/ionic-framework/issues/23914#issuecomment-924044174

Was doubt culprit error by @ldebeasi, I tried to fix that problem by changed a bit from the place declare this mountIntermediaryViews when once I called view page.

This one is my ionic vue information:

And this one is I tried to change a bit setting from /vue-router/index.esm.js && index.js
and after that is work for me. The component didn’t call back the last one anymore.

or you can change the code like this:

for(let i = startIndex; i < endIndex; i++) {
  return viewStack[i].mount = true;
}

with this work for me like a magic.
I think you may try it, like having more experiment. :hugs: