Ionic-framework: bug: ionic vue transition gets incorrect view item on dynamic url

[torgnywalin]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
When navigating between pages navigation breaks and page is not becoming visible.
The page we are navigating from is still in DOM as well as the new (even though router-direction is root), and have the same z-index.

We have experienced the issue when navigating with the help of sideMenu, but not sure if its only related to this.
We have also only experienced it while navigating from a dynamic url to a static url.

Link to video showing error occurring:
https://vimeo.com/488869055/6e4ba7b774

We are getting the following error:

Uncaught (in promise) TypeError: Cannot read property 'classList' of undefined
    at handlePageTransition (index.js?8a30:930)

it's related to this line of code:
https://github.com/ionic-team/ionic-framework/blob/e5757fc99beb705d912618233403d0df0f93fae4/packages/vue/src/components/IonRouterOutlet.ts#L234

It looks like some sort of reference to the DOM object is lost.
leavingViewItem.ionPageElement seems to be undefined when the error occurrs.

Expected behavior:
Navigation not to break, and the page we are navigating from to be removed from DOM.

Steps to reproduce:
I have created a repo with minimal code to reproduce the error:
https://github.com/torgnywalin/ionic-vue-debug-routing

This repo is based on the starter template sidemenu and are created with this command:

ionic start ionic-vue-debug-routing sidemenu --type vue

All changes i have done is in this commit:
https://github.com/torgnywalin/ionic-vue-debug-routing/commit/8683d13cdcac1513036de0d0a80c1384474d8dc8

Click randomly on the links in sidemenu, and go between the "folder" pages, and the test page.
After a while it should break when navigating to the test page. (See video link above)

Related code:
Full code:
https://github.com/torgnywalin/ionic-vue-debug-routing

Navigation in sideMenu:

<ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
  <ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none" detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
    <ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
    <ion-label>{{ p.title }}</ion-label>
  </ion-item>
</ion-menu-toggle>

<ion-menu-toggle auto-hide="false">
  <ion-item  router-direction="root" :router-link="'/test'" lines="none" detail="false" class="hydrated">
    <ion-icon slot="start" name="home"></ion-icon>
    <ion-label>Test</ion-label>
  </ion-item>
</ion-menu-toggle>

Other information:
While troubleshooting i found some other issues that references the same console error:

22286

22166

Both are closed.

Ionic info:

Ionic:

   Ionic CLI       : 6.12.2 (/Users/torgnywalin/.nvm/versions/node/v14.7.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.1

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

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

System:

   NodeJS : v14.7.0 (/Users/torgnywalin/.nvm/versions/node/v14.7.0/bin/node)
   npm    : 6.14.7
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

[torgnywalin]

Thanks for the quick response. I've tested and was not able to reproduce within 5-10 minutes of testing.
Before upgrading i was able to reproduce within 10-15 seconds, so seems like it's fixed.