Repository navigation
bug: tab sub-page navigation breaks occasionally with ionic-vue-router #29413
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
Navigating into tab sub-page and clicking on the respective tab bar in order to get to the initial tab page breaks navigation occasionally.
Either nothing happens or the following error viewItem2 is undefined is shown, sometimes subsequently followed by this error enteringEl is undefined.
When this happens the navigation for the view in question stays broken. Other routes may keep working but eventually they stop working as well. The broken navigation point may starts working again.
Expected Behavior
Inside a tab navigating to a sub page and then to another tab and then back to the initial sub page and then clicking on the tab of the sub page again should lead me to the initial tab page, regardless of the order of navigation steps I took before.
Steps to Reproduce
Unfortunately there I wasn't able to identify precise steps in order to reproduce this. But I think these are steps that should work
- On Tab 1 click the Next button in order to enter Tab 1 sub page
- Click on Tab 5
- Click on Tab 3
- Click the Next button on Tab 3 in order to enter Tab 3 sub page
- Click on Tab 5 again
- Click Tab 1 (you should be on Tab 1 Sub Page)
- Click Tab 1 again in order to get to initial page of Tab 1
- There it is
TypeError: viewItem2 is undefined @ionic_vue_router.js:562:7 - (If it's not broken by now go to Tab 3 (you should be on the sub page there), click Tab 3 again in order to get to the inital page of Tab 3 - Tab 3 doesn't do anything anymore)
Code Reproduction URL
https://stackblitz.com/~/github.com/socialmedialabs/ionic-sample-tabs-app
Ionic Info
Ionic:
Ionic CLI : 5.4.16 (/home/ubuntu/.nvm/versions/node/v21.6.1/lib/node_modules/ionic)
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/core : 6.0.0
Utility:
cordova-res : not installed
native-run : 2.0.1
System:
NodeJS : v21.6.1 (/home/ubuntu/.nvm/versions/node/v21.6.1/bin/node)
npm : 10.2.4
OS : Linux 6.5
Additional Information
The coresponding Github repo can be found here: https://github.com/socialmedialabs/ionic-sample-tabs-app
Activity
thetaPC commentedon May 2, 2024
Thank you for submitting the issue!
I was able to replicate it with your steps.
EA-Wardie commentedon Jul 17, 2024
I've also been having this issue. Or something very similar.
Re-creation is pretty consistent (v8.x):
If at least two tabs are one sibling page deep, using the back functionality in one of them, breaks the back functionality in the other. And in some cases breaks that tab's navigation completely if you're switching between multiple tabs.
Navigating back can be done by either tapping the tab button again or using an
<ion-back-button>.StackBlitz
socialmedialabs commentedon Aug 22, 2024
Any estimation on when you will look into this issue? I learned that this (or a very similar) issue already showed up in previous versions.
I feel like this is a major issue as it means that ion-tabs in fact can't be used at all.
answeb commentedon Sep 3, 2024
Hi ! Any update on this ? We ran into this issue, and were forced to use component navigation, loosing the url/hashnav state, and all features for this.
Like @socialmedialabs said, i really think it means that ion-tabs can't be used at all...
This problem exists since the previous versions of ionic (I tested with v7 and v7-lts). Did any one managed to use this non-linear navigation ? is it only with ionic/vue ? is there at least a way to "force" the click on a tab to go to the root of the tab (linear navigation) ?
suchyjan commentedon Sep 5, 2024
I have exactly the same problem as provided in example on StackBlitz. I have an app that is blocked from being deployed to the Google Play store because of this error. Using tabs is a common use case and this error is quite critical. Please prioritize if possible. Thank you.
ruettenm commentedon Sep 27, 2024
Also have the same problem. Is there any progress?
bonfa53 commentedon Dec 2, 2024
Same problem for me. It happens even on clean sample app, I created a repo with the code
https://github.com/bonfa53/ionic-tabs-sample
Follow two video with the errors:
Error 1
Ionic-tabs-error1.mp4
The page show the back button even if there is no back page
Error 2
Ionic-tabs-error2.mp4
The back button now apparently does noting, but if you click on TAB1 it shows TAB2 and the app is stuck
joshdonnell commentedon Dec 12, 2024
Hey just wondering if there has been any updates to this, I am experiencing the same issue with the latest app I have been working on. It has been flagged while we have been testing the app.
Is the only known workaround for now the use ion-nav in pages to act as a sibling page?
socialmedialabs commentedon Dec 12, 2024
I'm sorry to be the one to break it to you, but using
ion-nav(I understand your're usingion-nav-link) in order to navigate to sibling pages within tabs does not fix the issue, because the navigation state in the sibling pages won't be remembered.So, if you go to from
Tab 1 -> Sibling Page (n)toTab 2and tap back onTab 1you'll end up onTab 1 -> Parent Pageand not onTab 1 -> Sibling Page (n).Personally I find it pretty disappointing that this bug is known for such a long time, as it basically renders ionic useless for development of even slighter advanced apps.
Any thoughts @liamdebeasi?
joshdonnell commentedon Dec 12, 2024
@socialmedialabs
My issue is different from your described issue. I am using Nuxt Ionic over Vue Ionic, which could be the difference. I have also gotten around it by adding a default href to my nav link.
Tab 1 -> Sibling Page (Tab 1) > Tab 2 -> Sibling Page (Tab 2) to then tap back on Tab 1, here it takes me to Tab 1 Sibling as expected however I can then not click the back button to back to Tab 1 Parent or click the tab icon to pop the stack back to the Tab 1 Parent either.
socialmedialabs commentedon Dec 12, 2024
@joshdonnell do you have some code you could share? I know that there are similar issues in React as well, so I suppose these are all symptoms of the same issue complex.
schplay commentedon Jan 5, 2025
Just bumping this as I've also run into it while developing a new project. It doesn't appear that there are any team members responding in this thread which doesn't seem to bode well for it getting fixed. I can't help but agree with @socialmedialabs that this is a pretty egregious bug to have existed for as long as it has (based upon a quick google search) seeing as how navigation is a core feature of almost every app. It would be really nice to get some kind of indication that this bug is at least on the roadmap.
talthent commentedon Sep 30, 2025
Has anyone figured out a way to work around this issue?"
fix(vue-router): prevent out-of-bounds index when popping across tabs (…
fix(vue-router): prevent out-of-bounds index when popping across tabs (…
ShaneK commentedon May 20, 2026
Thank you for your patience in this issue. The fix for this has been released in 8.8.8!
ionitron-bot commentedon Jun 19, 2026
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.