bug: ionic vue IonRouterOutlet cannot access matchedRouteKey in vue-router

[NunoSav]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
When navigating from a route to another the onBeforeRouteLeave hook is not called

Expected behavior:
onBeforeRouteLeave is called

Steps to reproduce:
Run npm run serve on the project below

Related code:
https://github.com/NunoSav/ionic-vue3-navigation-guards

Ionic info:

Ionic:

   Ionic CLI       : 6.12.2 (/Users/nur/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.0

Capacitor:

   Capacitor CLI   : 2.4.3
   @capacitor/core : 2.4.3

Utility:

   cordova-res (update available: 0.15.2) : 0.15.1
   native-run (update available: 1.2.2)   : 1.2.1

System:

   NodeJS : v12.16.3 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Big Sur

[liamdebeasi]

Thanks, I can reproduce this. The problem here is that the RouterView component in vue-router provides a matchedRouteKey which is necessary for onBeforeRouteLeave to work properly: https://github.com/vuejs/vue-router-next/blob/master/src/RouterView.ts#L56.

IonRouterOutlet does not provide this because matchedRouteKey is internal to vue-router. I will reach out to the vue-router devs and see if there is a way we can access that.

[liamdebeasi]

The Vue Router team was able to export the required information for us. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.6.0-dev.202011201916.313ae69 @ionic/vue-router@5.6.0-dev.202011201916.313ae69

The needed information was added as part of vue-router@4.0.0-rc.4 so make sure you have that version installed as well.

[NunoSav]

This works :)

Great work, as usual, @liamdebeasi. Thanks!

[NunoSav]

BTW, any possibility this will be released as 5.5.1 beginning next week?

[liamdebeasi]

Thanks for the issue. This has been resolved via #22542, and a fix will be available in an upcoming release of Ionic Framework.

BTW, any possibility this will be released as 5.5.1 beginning next week?

We don't have a public timeline for a 5.5.1 release, but you can get a general sense of progress by looking at our milestones: https://github.com/ionic-team/ionic-framework/milestones. Note that these are subject to change especially with the holidays in the US coming up. Until then, that dev build should be safe to continue to develop with until 5.5.1 is out.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.