Questions about q-route-tab in 0.14



  • 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

    0_1499109621155_Снимок экрана 2017-07-03 в 22.15.58.png

    Next, I make a q-route-tab, and fill the TO prop with my component, but the tab content is empty.
    0_1499110085144_Снимок экрана 2017-07-03 в 22.15.58.png

    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.



  • show me your component.vue please…

    cheers max





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



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



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



  • @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')
          }
        ]
      }
    ]