How to correctly setup vue routing with qLayout?

Tom De Smet

I have a navigation structure with tabs. And my navigation would be something like:
Homepage -> detail page -> sub-detail page
Where the home tab should remain active when a user is on the sub-detail page.

I have a main layout file like this (simplified):

<q-layout>
  <q-header />
  <q-drawer />

  <q-page-container>
    <router-view />
  </q-page=container>

  <q-footer>
    <q-tabs />
  </q-footer>
</q-layout>

In a page that gets loaded into the router-view I have:

<q-page>
  Content
</q-page>

But for the hometab to remain active based on my routing as the single source of truth, I’d set a child router in my router and have a second <router-view> in this component. But when I do this, I’m loading a new component with its own <q-page> inside the parents <q-page> which is inside the main <q-page-container>.

Is this ok? Won’t it bring a world of trouble? Can q-page components be inside other q-page components?

What’s the best way of nesting pages like this while keeping the main page tab active?

s.molinari

You can do as many “children” paths as you’d like. It’s just a matter of if it makes sense for your users or not and that is up to how you put your pages together.

Your tabs though, shouldn’t be in your pages, if that is what you mean. The tabs should be put within the layout (even if you have sub-menus of more pages).

Scott

Tom De Smet

My tabs remain in the layout within the footer.
But what I mean is that theoretically my structure could become something like this which doesn’t seem nice at all:

<q-layout>
  <q-page-container>
    <q-page>
        CONTENT OF MAIN PAGE
        <div>
            <q-page>
                CONTENT OF DETAIL PAGE
                <div>
                    <q-page>
                        CONTENT OF DETAIL SUB PAGE
                    </q-page>
                 </div>
            </q-page>
        </div>
    </q-page>
  </q-page=container>
</q-layout>

This is all just for keeping the active state on my tabs when on a different page. So maybe there is a better way?
Now all my components have a root path in my router. Because it’s an app, url’s don’t matter much.
But the way you navigate is that you go deeper and deeper into a structure. The components are now all loaded into the main <router-view> which works perfectly and is easy to maintain and develop, but the active state on my tabs doesn’t work because I’m on a different rootpath whenever I go deeper into the structure. That’s why I decided to work with child paths in my router and end up with this code.

Any ideas?

s.molinari

Would the sub-page content be navigatable?

Scott

Tom De Smet

What do you mean exactly by navigatable?

It wouldn’t have its own navigation. It is kind of the end station, the deepest level. Just an info page.

The main page consists of a list of items. Clicking one of the items brings you to the detail page.
The detail page consists of some info + another list of items. Clicking one of those items brings you to the detail sub page.
The detail sub page consists of just plain info. (This page will also be shown elsewhere on another level -> as a detail page).

s.molinari

So, you do have a hierarchy of routes and some of your pages would have <router-view>s in them. Nothing wrong with that. Depending on what you are showing, you might want to think about adding content into your pages dynamically, instead of different pages or sub-pages. It’s hard to say with what you have given as info, but if the pages aren’t changing from layout or design, I’d consider finding a way to get the content to be more dynamic.

Scott

metalsadman

@Tom-De-Smet I think it’s ok, as long as the the top container of your q-pages is a q-page-container. tried to mock here https://codepen.io/metalsadman/pen/ExPPwRM