QRouteTab: Appending routes correctly



  • I seem to have a 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.