ionic-team / ionic-team/ionic-framework

bug: vue, root direction does not unmount wiped views

Open
#27,191 10 comments 3 reactions 0 assignees View on GitHub
package: vue type: bug
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

![image](https://user-images.githubusercontent.com/10531584/231722878-9e055a63-e59d-40f4-95fb-e77f8f76f971.png)

## Root Navigation to ForumsView
![image](https://user-images.githubusercontent.com/10531584/231723185-3d5d27d0-8ace-41c0-b233-25355db01796.png)

## Forward Navigation to TopicView
* The topic view is now a stacked view in the IonRouterOutlet
![image](https://user-images.githubusercontent.com/10531584/231723350-cd845ac0-fbde-4bc6-83a1-49b246d6abdf.png)

## Another Forward Push to ThreadView
* Third stacking done
![image](https://user-images.githubusercontent.com/10531584/231723618-407b1b33-e550-4ed3-97b9-5559a2de99ad.png)

## 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

![image](https://user-images.githubusercontent.com/10531584/231724429-df17bead-1b2a-4599-8a38-fda5a033a5aa.png)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.