Repository navigation
bug: navigation breaks when replacing nested tab view #30617
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
v8.x
Current Behavior
When using nested routes and tabs there is a situation where navigation breaks when you replace a nested tab view with a sibling (and switching tabs between). When this happens the back button in the view doesn't work and you can't switch to the previous tab.
Expected Behavior
- The back button should go to the Tab 1 view
- Clicking on the Tab 2 tab should show the Tab 2 view
Steps to Reproduce
Steps to replicate bug:
- Go to: https://stackblitz.com/~/github.com/bentleyo/ionic-tabs-vue?file=src/views/Tab1Page.vue
- Open Tab 1 - Inner View 1
- Switch to Tab 2
- Switch back to Tab 1 (should still be on Inner View 1)
- Replace with Tab 1 - Inner View 2
- Try pressing the back button or switching to Tab 2, neither work
Code Reproduction URL
https://stackblitz.com/~/github.com/bentleyo/ionic-tabs-vue?file=src/views/Tab1Page.vue
Ionic Info
I am inside the ionic project directory, but it's playing up for me.
I can replicate using:
@ionic/core@8.7.2
@ionic/vue-router@8.7.2
@ionic/vue@8.7.2
[WARN] You are not in an Ionic project directory. Project context may be missing.
Ionic:
Ionic CLI : 5.4.16
Utility:
cordova-res : not installed
native-run : 2.0.1System:
NodeJS : v18.16.0
npm : 9.5.1
OS : macOS Unknown
Additional Information
No response
Activity
fix: preserve tab property on replace and correct pop delta for leavi…
thetaPC commentedon Oct 16, 2026
Thanks for the report, and sorry for the delay.
Verified on 9.0.8.
useIonRouter().replace()is a root navigation: it is the same asionRouter.navigate(path, 'root', 'replace'), which resets the navigation history so the new page becomes the start of the stack. View 2 therefore has nothing to go back to, but it still shows a back button, so tapping it does nothing. Switching to Tab 2 works on 9.0.8.Workaround, verified on 9.0.8: keep
replace()and give the back button on the replacing page adefault-hrefpointing at the page it should return to. With no history to go back to, the back button falls back to that route:We do not recommend switching to
ionRouter.navigate(path, 'forward', 'replace')or Vue Router'srouter.replace()for this flow yet. They keep the history, but after a tab switch the back button changes the URL and leaves the replaced page on screen.Tracked as a bug in
@ionic/vue-router.fix(vue-router): keep back working after replacing a page in tabs (io…