bug: vue, react using browser back button in tabs does not display correct url

[TadasMil]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

On navigating to Tab 1 page nested route and selected Tab 2 page, then go back to Tab 1 page and clicking back on the browser back button the displayed route is Tab 1 (The url is for Tab 2, but the route displayed is Tab 1).

Expected Behavior

On navigating to Tab 1 page nested route and selected Tab 2 page, then go back to Tab 1 page and clicking back on the browser back button the displayed route is Tab 2 (The url is for Tab 2, and the route displayed is Tab 2).

Steps to Reproduce

1. Run the application.
2. Click on Navigate to nested page text which can be found inside the Tab 1 page as a text.
3. You are redirected to Tabs 1 nested page.
4. Click on Tab 2.
5. Click on Tab 1 (The nested child route is displayed).
6. Click browser back button.
7. The displayed page is Tab 1 (Root route), but the URL is for Tab 2.

Code Reproduction URL

https://github.com/TadasMil/ionic-bug-vue-router

Ionic Info

Ionic:

Ionic Framework :
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",

Capacitor:
"@capacitor/app": "1.1.1",
"@capacitor/core": "3.4.3",
"@capacitor/haptics": "1.1.4",
"@capacitor/keyboard": "1.2.2",
"@capacitor/status-bar": "1.0.8",

Additional Information

The actual documentation for nested child routes can be found here: https://ionicframework.com/docs/vue/navigation#child-routes-within-tabs. The actual code that's in github repo is the same as in the documentation.

I'm attaching a video example.

Ionic.App.Mozilla.Firefox.2022-04-17.19-33-18.mp4

[tigohenryschultz]

We are having a similar issue.

[liamdebeasi]

Thanks for the issue. The problem here is that we have no mechanisms for correcting the URL when using the browser back button. (We correct the URL when using the ion-back-button though. This issue impacts both React and Vue.

[liamdebeasi]

This also impacts the hardware back button as we call history.go(-1) when you press the hardware back button: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/src/router.ts#L75