You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing 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.
liamdebeasi
changed the title
bug: ion-nav does not remove component in DOM or update state correctly
bug: vue, ion-nav does not unmount components correctly
Jun 26, 2023
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
When using the
IonNav
andIonNavLink
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 throughIonNavLinks
without duplicating elements in the DOM, and correctly updating vue state within the components.Steps to Reproduce
git clone https://github.com/0x467/ionic-ion-nav-bug-vue
npm install
npm run dev
Code Reproduction URL
https://github.com/0x467/ionic-ion-nav-bug-vue
Ionic Info
Additional Information
This problem looks similar to the one recently solved in React. #25753
Screen.Recording.2023-05-09.at.10.57.16.AM.mov
The text was updated successfully, but these errors were encountered: