bug: vue, root direction does not unmount wiped views

[maxgaurav]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

Navigating forward mode with at least 3 forward navigation and then triggering root navigation after the third or more forwarded route does not clean up the mapping of the IonRouterOutlet components completely but only removes 1 Component from the stack and pushes the root element.

Expected Behavior

The expected behavior is that the IonRouterOutlet should reset the stack and start from scratch if the direction is root but it does not you can see the screenshots of stacks created in the Steps to Reproduce.

Steps to Reproduce

Here are step by step for current behavior with VueDev Tool screenshots

The initial state starting at DashboardView

Root Navigation to ForumsView

Forward Navigation to TopicView

• The topic view is now a stacked view in the IonRouterOutlet
  

Another Forward Push to ThreadView

• Third stacking done
  

Final Redirection to Dashboard using root as router-direction

• Side Note: I have also tried replace through vue router ($router), ionRouter instance navigate function using useIonRouter but with no success

Code Reproduction URL

https://stackblitz.com/edit/vitejs-vite-yj2kdn?file=src/components/HelloWorld.vue

Ionic Info

Ionic:

   Ionic CLI       : 6.20.4 (/home/maxgaurav/.nvm/versions/node/v18.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.4.1

Capacitor:

   Capacitor CLI      : 4.5.0
   @capacitor/android : 4.5.0
   @capacitor/core    : 4.5.0
   @capacitor/ios     : 4.5.0

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.7.2) : 1.6.0

System:

   NodeJS : v18.3.0 (/home/maxgaurav/.nvm/versions/node/v18.3.0/bin/node)
   npm    : 9.1.2
   OS     : Linux 5.15


  ────────────────────────────────────────────────

     Ionic CLI update available: 6.20.4 → 7.0.0
         Run npm i -g @ionic/cli to update

  ────────────────────────────────────────────────

Additional Information

In the IonRouterOutlet component implementation of vue package through debugging i see that action of call unmountLeaving views only being looped once.

I have added the links to the actions below.

ionic-framework/packages/vue-router/src/viewStacks.ts

Line 190 in 114fe28

const unmountLeavingViews = (

https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/components/IonRouterOutlet.ts#L400

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[maxgaurav]

I have added the StackBlitz url for the demo in the description and see below as well. Don't forget to turn on the VueDev tools to see the main problem.

https://stackblitz.com/edit/vitejs-vite-yj2kdn?file=src/components/HelloWorld.vue

@liamdebeasi

[maxgaurav]

@liamdebeasi

Any update on this? Did the StackBlitz reproduction help?

[liamdebeasi]

Thanks, I can reproduce this. Views 1 and 2 should be unmounted when using routerDirection="root" because the internal stack history is getting wiped.

[pivko420]

Any update on this issue? We need this fixed in our app. Only solution right now is to downgrade to older version where it worked so i wont be able to go back from Homepage after login.

[maxgaurav]

@pivko420
Which version did you downgrade your app to?

I am also waiting for the changes to get fixed but it looks like I may have to end up providing the PR for the fix if there is no activity by next week as this is a significant issue in our app. We have for the time being temporarily closed out the forward navigation flow and made all of them root.

[pivko420]

I use "@ionic/vue-router": "6.0.0" in another older app and it works there.

package.json
"@capacitor/android": "3.4.3",
"@capacitor/app": "1.0.7",
"@capacitor/core": "3.4.3",
"@capacitor/ios": "3.4.3",
"@capacitor/keyboard": "1.2.0",
"@capacitor/splash-screen": "^1.2.2",
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",
"vue": "^3.2.1",
"vue-router": "^4.0.0-0",

[maxgaurav]

@pivko420
Thanks for sharing. I have tested the same and confirm that it gets fixed in the old version. I am comparing the changes in the old version versus the one I am facing issue and attempting to create a fix. Once done I will generate a PR.

[gzusgo-thinkbig]

This is still a issue for all. all navigation is boggy. it shows the right url but the view is wrong. is like old view do not die.

[overbost]

I'm facing same issue with latest @ionic/vue-router 7.7.0.
The components is not unmounted, when the stack grow and we have a lot (4-5) of components mounted the ion-router-outlet break.
Route is matched but the view show the first component loaded in ion-router-outlet

This solve my issue, the ion-router-outlet seem store only the current route but it works
#20597 (comment)