Ionic nested routes and tabs not working as expected

Ionic Framework Ionic Vue
1

Hi,

We have an application with 4 tabs each having nested routes.

Ex. of routes
tab1/childPage1/childPage2
tab2/childPage1/

from tab1 we router.push childPage1 and from childPage1 we push childPage2 (within same tab) All works fine.

From childPage 2 we push a route which doesn’t belong to any tab, and clicking ion-back-button work fine and we can get back all the way to the tab1 page again.

But if we navigate from childPage2 to tab 2 and back to tab1, childPage2 is still shown as expected. But clicking the back button does not always return the childPage1.
Very often is doesn’t do anything at all, eventhoug defaultHref is set to childPage1.

Then if you click on the tab1 it returns to the root, but sometimes it also just returns to the prvious child page, eventhough url shows the root page.

This is a very strange behavior and quite hard to explain. But it seems like that navigating between tabs when you are having childpages open, screws something up behind the scenes.

There are no errors in the console, so not much to go from.

Are anyone experiencing the same (random) issues?

We are using the latest version of vue, vue-router and ionic:
ionic/vue: “6.0.1”,
ionic/vue-router: “6.0.11”,
ionic/core: “^6.0.1”,
vue-router: “^4.0.14”,
vue: “^3.2.26”,

2

I don’t think you are alone. I also have some odd issues with the back button. Typically going from a normal page back to a tabbed page. Usually it randomly doesn’t do anything when hitting back. Sometimes it goes to a random different tabbed page. I think it might be related to this same issue - bug: ion-back-button sometimes not working · Issue #25017 · ionic-team/ionic-framework · GitHub.

3

it would be helpful to see how you have your routes set up. also if this is in fact a bug you will need a sample project showing the error.

Also what I have done in the past is hide the tabs once you go into the detail/child route of a tab, only show the tabs at the top level of the navigation stack

1 Like
4

Yes, we are definitely having the same issue as you are linking to. Glad to see I’m not the only one.
The tab button is also acting strange. I think they might relate to each other.

5

Hi

The way our app looks and works. Hiding the tab bar is not an option unfortunately.

export const routes: Array<RouteRecordRaw> = [
	{
		path: "/",
		component: Tabs,
		children: [
			{
				path: "",
				redirect: "home",
			},
            /* HOME IS A TAB */
			{
				name: "homepage",
				path: "home",
				component: () => import("@/views/Home.vue"),
			},
			{
				name: "map",
				path: "home/map",
				component: () => import("@/views/MapSearch.vue"),
			},
			{
				name: "mapSearchResults",
				path: "home/map/search",
				component: () => import("@/views/MapSearchResults.vue"),
			},
            /* FAVORITES IS A TAB */
			{
				name: "favorites",
				path: "favorites",
				component: () => import("@/views/favorites.vue"),
			},

            /* THESE ARE NOT PART OF ANY TAB */
			{
				name: "details",
				path: "details/:resourceId",
				component: () => import("@/views/details.vue"),
			},
			{
				name: "editDetails",
				path: "editDetails/:resourceId",
				component: () => import("@/views/details.vue"),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes,
});
6

then why are they listed as children of the tab navigation stack if they are not part of any tab? They are in the wrong place I believe. Also, how do you get to them if they are not part of any tab?

Re-reading your initial question you say that even though you are two clicks into a tab navigation stack that the next path “doesn’t belong to the tab”? I think therein lies the problem, you can try to force the code to do what you want it to do or understand how and works and then find a solution to solve your problem.

I am happy to help you with a solution if you are looking for a solution, but if you are trying to make what you are doing now work I think that there are better architectural approaches that can be found using the router and accepting its current limitations

7

They are placed within the tabs section since routing to them will otherwise make the tab bar disappear. I’m not sure how this is solved otherwise.

From mapSearchResults you are able to get to details and edit details routes.

From favorites you are also able to get to both those routes (details and edit details)

I’m not sure what the best practice is when multiple tabs can potentially use the same route without hiding the tab bar

8

Just tried moving them out of the tab section and the errors still occour.

I found an ongoing git bug on this specific issue: bug: router.go with tabs causes undefined references · Issue #24303 · ionic-team/ionic-framework (github.com)

Looks like they are working on a solution :slight_smile: