No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to correctly setup vue routing with qLayout?

    Framework
    3
    7
    314
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      Tom De Smet last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        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

        1 Reply Last reply Reply Quote 0
        • T
          Tom De Smet last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            Would the sub-page content be navigatable?

            Scott

            1 Reply Last reply Reply Quote 0
            • T
              Tom De Smet last edited by

              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).

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                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

                1 Reply Last reply Reply Quote 0
                • metalsadman
                  metalsadman last edited by

                  @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

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post