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:
and here is what I (currently) get:
-
@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.
-
@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
