Using q-route-tab with splitter (Solved)

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.

mboeni

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

metalsadman

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

mboeni

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

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

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

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

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

and here is what I (currently) get:

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

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

mboeni

@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

No More Posting New Topics!

Using q-route-tab with splitter (Solved)