QRouteTab: Appending routes correctly

[arjanski]

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!