Ionic Vue nested routes

Ionic Framework Ionic Vue
1

Hi everyone, I am very excited to have started working with the Ionic framework. It is a breeze how easy everything looks great.

I am trying to port my app from Vue 2 to Ionic with Vue 3, but am having trouble to implement nested routes: https://router.vuejs.org/guide/essentials/nested-routes.html

I have managed to implement tabs + router. Let’s say one of the tabs navigates to (as in vue example)
‘/user/foo/profile’. Here I want to router outlet User that holds the nested router outlet Profile.

I can’t figure out how to do this. Is there an example, or should I use another approach when working with Ionic?

Thanks for all the great work!

2

what is “foo”??

not really clear what the question is here? But I will guess that you are talking about child routes on a tab?

3

Hi and thanks for the example.

I can try to explain my question given your example. TabOneDetail is a child route of TabOne and both have their own view. Thus, TabOneDetail and TabOne both have a header/toolbar and a content block.

In my use case I want TabOneDetail and TabOne to share the same header/toolbar, but have different content.
This can be achieved by making a shared component TabOneHeader.

Another approach is to let TabOne have a header/toolbar block with a nested route as content. TabOneDetail only has its own content and is rendered inside TabOne as a nested view.

Is the second approach possible with Ionic, or maybe it is not meant to be working that way?