ionic-team / ionic-team/ionic-framework
bug: vue, root direction does not unmount wiped views
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.
https://github.com/ionic-team/ionic-framework/blob/114fe28f3cc9ee52bc5eefa569353f490ab01023/packages/vue-router/src/viewStacks.ts#L190
https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/components/IonRouterOutlet.ts#L400
Contributor guide
Assessment
This issue has not been assessed yet.