bug: react, vue back button does not select correct view when going back from a tabs instance

[horganice]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.6.3 (Latest)

Current behavior:
I have an ionic-vue app that uses vue-router and the tabs template.
When I navigate to a nest tabs, and switch to tab2 and switch back to tab1.
When I click on ion-back-button it show error Cannot read property 'ionPageElement' of undefined

Expected behavior:
I would expect that switch back to parent tabs

Steps to reproduce:
Make a ionic-vue app using the tabs template
Add a sub route to one of the tabs (i.e. tab1) (make sure this view has the ion-back-button active in the ion-toolbar)
Enter the sub route (of tab1)
Switch to another tab (i.e. tab2) from this sub route
Switch back to the tab that has the sub route active (i.e. tab1)
Press the back button in this sub route
The back button causes the view to return to the parent view of this tab (tab1 in this case, which I would expect) but the url switches back to the other tab (tab2)

• Make a ionic-vue app using the tabs template
• Create tabs2 (/tabs2/test) and add ion-back-button
• Navigate to tabs2/test/tab1
• Switch to tab2
• Switch back to tab1
• Click ion-back-button
• It show error Cannot read property 'ionPageElement' of undefined

GIF Image ( Steps to reproduce )

Related code:
https://codesandbox.io/s/magical-snow-w7xok

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1
   Ionic Framework : @ionic/vue 5.6.3

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   NodeJS : v14.15.5
   npm    : 6.14.11
   OS     : macOS Big Sur

[scryptoking]

Maybe related to my issue #23087

[scryptoking]

Took another look at this. I think this has something to do with putting a ion-header (with ion-back-button) outside of the tabs. I find this uncommon use (I think). But I could be mistaken. @liamdebeasi When routing through this codesandbox, the url gives the same issue as in #23087.

[liamdebeasi]

Thanks, I will take a closer look at this. I need to see if using ion-back-button outside of tabs to control the tabs is something we support.

[liamdebeasi]

I can confirm this is a bug in both Ionic Vue and Ionic React. I will look into a fix.

[liamdebeasi]

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

npm install @ionic/vue@5.7.0-dev.202104021913.b0533ff @ionic/vue-router@5.7.0-dev.202104021913.b0533ff

[Suxsem]

dear @liamdebeasi I tried your dev built but I'm encountering the issue described here: #23141
can you please take a look?

[horganice]

@liamdebeasi Just did a dev build on my project. all is working fine now :) Thank you !

[liamdebeasi]

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

[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.