Questions about q-route-tab in 0.14

[Humboldt155]

Hello!

I want to make a path to the route in q-route-tab, but id doesn’t work.
As I understand, I make it right.
First, I input the path to my component in router.js

Next, I make a q-route-tab, and fill the TO prop with my component, but the tab content is empty.

What is my mistake? When I make just <router-view /> in App.vue, everything is ok, and MyComponent works, but in q-route-tab it doesn’t.

[Max]

show me your component.vue please…

cheers max

[spectrolite]

you need to use nested routes (sub-routes)
this may help:
http://beta.quasar-framework.org/components/integrating-layout-with-router.html
https://router.vuejs.org/en/essentials/nested-routes.html

[RichAyotte]

I didn’t notice a <router-view/> in that screenshot, did you include it? Also, describe what’s not working.

[arjanski]

I seem to have a similar problem understanding the routing neccessary for q-route-tab. I would like each tab content to load another component via routing and append the url (“parent-url/tab1”, “parent-url/tab2”). Loading components works using child routes and router-view in q-layout, but only for the first tab selected. Once I have routed to let’s say parent-url/tab1, and select a different tab (tab2), the url gets appended on top of the tab1 child url, resulting in parent-url/tab1/tab2. This leads to a 404…

Any ideas what I am doing wrong?

Template of ParentComponent.vue:

 <template>
   <q-layout>
        ...
          <div slot="navigation">
          ...
            <q-tabs color="purple" inverted align="center">
               <q-route-tab
                 default="true"
                 label="Integralansicht"
                 to="tab1"
                 append
                 slot="title"
                 color="purple"
             />
          <q-route-tab
            label="Leseansicht"
            to="tab2"
            append
            slot="title"
            color="purple"
          />
          <q-route-tab
            label="Transkript"
            to="tab3"
            append
            slot="title"
            color="purple"
          />
    </q-tabs>
  </div>

  <router-view />

 </q-layout>
<template>

My route.js looks as follows:

    {
      path: 'parent-url',
      component: load('pages/editions/EditionView'),
      children: [
        {
          path: 'tab1',
          component: load('pages/editions/ViewmodeIntegral')
        },
        {
          path: 'tab2',
          component: load('pages/editions/ViewmodeReader')
        },
        {
          path: 'tab3',
          component: load('pages/editions/ViewmodeTranscript')
        },
        {
          path: 'tab4',
          component: load('pages/editions/ViewmodeFacsimile')
        }
      ]
    }

`

Thanks a lot for any ideas!

[hccsit]

@arjanski Have you figured out how? I’m having the same question.

[benoitranque]

@hccsit There are multiple issues here. First: the root of your app is App.vue, and it contains a router-view.
You may then mount another component to that router view.
Now say that component is a layout you want on multiple page: you mount that to the router-view of App.vue, and give it it’s own router-view so you can display content inside your layout. You then use routes something like this to mount components there:

const routes = [
  {
    path: '/',
    component: load('Layout').
    children: [
      {
        path: 'myComponent',
        component: load('myComponent')
      }
    ]
  }
]