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

    Using q-route-tab with splitter (Solved)

    Help
    2
    11
    998
    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.
    • mboeni
      mboeni last edited by mboeni

      Hi there

      I would like to have a a setup where I use a splitter and have the q-tabs on the left (v-slot:before) and the content on the right (v-slot:after). Clicking on the tab should load a page and display it in the appropriate place to the right (<router-view/>).

      Issue: The whole page is replaced, not just the right side of the splitter. How do I make sure routing to a page does not overwrite the whole page?

      Here’s the code:

      <template>
        <q-page class="flex flex-start bg-secondary">
          <div style="width:100%">
            <q-splitter
              :value="160"
              disable
              unit="px"
            >
              <template v-slot:before>
                <q-tabs
                  v-model="selectedTab"
                  vertical
                  dense
                  inline-label
                  >
                  <div class="q-pa-sm" >
                    <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
                  </div>
                  <q-route-tab
                    name="iveDebug"
                    icon="account_box"
                    label="IVE Debugging"
                    style="justify-content:initial"
                    :style="{ color: localTextColor2 }"
                    to="/ivedebug"
                    exact
                  />
                </q-tabs>
              </template>
              <template v-slot:after>
                <q-page-container>
                  <router-view/>
                </q-page-container>
              </template>
            </q-splitter>
          </div>
        </q-page>
      </template>
      

      Here’s the routing I’m doing:

        {
          path: '/ivedebug',
          component: () => import('layouts/MainLayout.vue'),
          children: [
            { path: '', component: () => import('pages/IveDebug.vue') }
          ]
        }
      

      Cheers,
      m.

      1 Reply Last reply Reply Quote 1
      • mboeni
        mboeni last edited by

        Follow up: If the above is not possible, what would be the components to use to achieve this?

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

          It is possible, it’s your route defintion that needs changing. Is mylayout the one tht hold the splitter?

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

            @metalsadman No, the splitter is part of the ‘Devtools.vue’ page, this page should hold a set of pages, set apart from the menu through the splitter. Here’s the code:

            <template>
              <q-page class="flex flex-start bg-secondary">
                <div style="width:100%">
                  <q-splitter
                    :value="160"
                    disable
                    unit="px"
                  >
                    <template v-slot:before>
                      <q-tabs
                        v-model="selectedTab"
                        vertical
                        dense
                        inline-label
                        >
                        <div class="q-pa-sm" >
                          <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
                        </div>
                        <q-route-tab
                          name="iveDebug"
                          icon="library_books"
                          label="IVE Debugging"
                          style="justify-content:initial"
                          :style="{ color: localTextColor2 }"
                          to="/ivedebug"
                          exact
                        />
                      </q-tabs>
                    </template>
                    <template v-slot:after>
                      <q-tab-panels v-model="selectedTab" animated>
                        <q-tab-panel name="iveDebug">
                          <router-view />
                        </q-tab-panel>
                      </q-tab-panels>
                    </template>
                  </q-splitter>
                </div>
              </q-page>
            </template>
            
            1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman last edited by metalsadman

              Then make that the parent component of the route of your tabs. You can probably do away with named routes, i suggest you take a look in vue router docs.

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

                @metalsadman
                This is my current state, does not really solve the issue, though…

                  {
                    path: '/devtools',
                    component: () => import('layouts/MainLayout.vue'),
                    children: [
                      { path: '', component: () => import('pages/Devtools.vue') },
                      { path: 'iveDebug', component: () => import('pages/IveDebug.vue') }
                    ]
                  }
                

                I’ve read the routing docs…is there anything specific that you have in mind which helps for this?

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

                  @mboeni will have to mock one later, but this in the docs tackles this scenario https://router.vuejs.org/guide/essentials/nested-routes.html

                  Saw your edit, seem like your’re in the right path there. Make the last child a child of devtool.

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

                    @metalsadman Thanks, that’s appreciated. Yep I’ve tried to replicate the behavior based on the nesting docs…current status (not working yet, though):

                      {
                        path: '/devtools',
                        component: () => import('layouts/MainLayout.vue'),
                        children: [
                          { path: '/devtools', component: () => import('pages/Devtools.vue') },
                          { path: '/devtools/iveDebug', component: () => import('pages/IveDebug.vue') }
                        ]
                      }
                    

                    To illustrate more…

                    …here is what I want:
                    whatIwant.jpg

                    and here is what I (currently) get:
                    whatIget.png

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

                      @mboeni using the docs example https://quasar.dev/vue-components/tabs#Vertical, into the one you are trying to do here https://0ybb3.sse.codesandbox.io/challenges, source in here https://codesandbox.io/s/quasar-v1-samples-0ybb3.

                      mboeni 2 Replies Last reply Reply Quote 0
                      • mboeni
                        mboeni @metalsadman last edited by

                        @metalsadman Thanks for the example. That’s exactly what I want to do. I am trying to replicate this and have come up with:

                        <template>
                          <q-layout>
                            <q-page-container>
                              <q-page class="flex flex-start bg-secondary">
                                <div style="width:100%">
                                  <q-splitter
                                    :value="160"
                                    disable
                                    unit="px"
                                  >
                                    <template v-slot:before>
                                      <q-tabs
                                        v-model="selectedTab"
                                        vertical
                                        dense
                                        inline-label
                                        >
                                        <div class="q-pa-sm">
                                          <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
                                        </div>
                                        <q-route-tab
                                          name="iveDebug"
                                          icon="library_books"
                                          label="IVE Debugging"
                                          style="justify-content:initial"
                                          :style="{ color: localTextColor2 }"
                                          to="/devtools/ivedebug"
                                          exact
                                        />
                                      </q-tabs>
                                    </template>
                                    <template v-slot:after>
                                      <router-view />
                                    </template>
                                  </q-splitter>
                                </div>
                              </q-page>
                            </q-page-container>
                          </q-layout>
                        </template>
                        

                        and on the routing side:

                          {
                            path: '/devtools',
                            component: () => import('layouts/MainLayout.vue'),
                            children: [
                              {
                                path: '',
                                component: () => import('pages/Devtools.vue') },
                              {
                                path: 'ivedebug',
                                component: () => import('pages/IveDebug.vue') }
                            ]
                          }
                        

                        It still does not work (it’s still like the second screenshot above) - but I really don’t see where I’m getting it wrong…I’m sure it’s a minor thing but I just don’t see it right now… -.-

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

                          @metalsadman Okay, I finally got it… 😉

                            {
                              path: '/devtools',
                              component: () => import('layouts/MainLayout.vue'),
                              children: [
                                {
                                  path: '',
                                  component: () => import('pages/Devtools.vue'),
                                  children: [
                                    {
                                      path: 'ivedebug',
                                      component: () => import('pages/IveDebug.vue')
                                    }
                                  ]
                                }
                              ]
                            }
                          

                          Thanks for your help and sorry for the slow thinking 😉

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