ionic-team / ionic-team/ionic-framework

bug: vue, ion-nav does not unmount components correctly

Đang mở
#27,428 1 bình luận 2 reaction 0 người được giao Xem trên GitHub
package: vue type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

v7.x

### Current Behavior

When using the `IonNav` and `IonNavLink` components in Vue for routing, going 'forward' creates a new element in the DOM, but going 'backward' does not remove that element. This results in multiple duplicate elements being created when navigating backwards then forwards again (with the current screen being shown in a higher z-index).

As a side effect, it seems than whenever vue state is updated inside the `IonNav` component, a new component is created entirely, rather than updating the state correctly.

### Expected Behavior

Would expect `IonNav` to work correctly in navigating forwards and backwards through `IonNavLinks` without duplicating elements in the DOM, and correctly updating vue state within the components.

### Steps to Reproduce

1. `git clone https://github.com/0x467/ionic-ion-nav-bug-vue`
2. `npm install`
3. `npm run dev`
4. Navigate between pages using the given buttons and see the dom renders duplicate components

### Code Reproduction URL

https://github.com/0x467/ionic-ion-nav-bug-vue

### Ionic Info

```
Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.0.5

Capacitor:

Capacitor CLI : 5.0.1
@capacitor/android : not installed
@capacitor/core : 5.0.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v19.9.0 (/opt/homebrew/Cellar/node/19.9.0/bin/node)
npm : 9.6.3
OS : macOS Unknown

ion-nav-bug-vue %
```

### Additional Information

**This problem looks similar to the one recently solved in React.** https://github.com/ionic-team/ionic-framework/issues/25753

https://user-images.githubusercontent.com/109240540/237061391-ef2c64e3-d51f-42fb-8d96-61f136eb2010.mov

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.