ionic-team / ionic-team/ionic-framework

bug: vue, root direction does not unmount wiped views

Ouverte
#27,191 10 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
package: vue type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.