ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.07k stars 13.51k forks source link

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

Open ghost opened 1 year ago

ghost commented 1 year ago

Prerequisites

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

Nikita0x commented 2 months ago

Still not fixed in 2024