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!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.