Using q-route-tab with splitter (Solved)



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



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



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



  • @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>
    


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



  • @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?



  • @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.



  • @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





  • @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… -.-



  • @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 😉


Log in to reply