bug: vue, react using browser back button in tabs does not display correct url #25141
Description
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
- Run the application.
- Click on Navigate to nested page text which can be found inside the Tab 1 page as a text.
- You are redirected to Tabs 1 nested page.
- Click on Tab 2.
- Click on Tab 1 (The nested child route is displayed).
- Click browser back button.
- 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.