[X] 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.
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. https://github.com/ionic-team/ionic-framework/issues/25753
https://user-images.githubusercontent.com/109240540/237061391-ef2c64e3-d51f-42fb-8d96-61f136eb2010.mov