ionic-team / ionic-team/ionic-framework

bug: vue, root direction does not unmount wiped views

未关闭
#27,191 10 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看
package: vue type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

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

贡献指南

打开贡献指南

调研方向

Start with packages/vue-router/src/viewStacks.ts around the linked unmountLeavingViews logic and packages/vue/src/components/IonRouterOutlet.ts around line 400. Reproduce the StackBlitz flow with multiple forward navigations followed by root navigation, then trace why cleanup runs only once. Done means root navigation fully resets the IonRouterOutlet stack and removes all wiped views.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
28/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。