Tabs only in pages with sub routes

[D3myon]

Hi,

I’ve got the following problem:

I intend to use the side menu as the primary navigation and want to use tabs inside the navigation slot for sub routes (sub pages). So some pages with sub routes shall contain tabs and those without shall not.

I could load different layouts, but I guess it’s not really best practice.

Is there a proper way to realize this?

Thank you very much.

And Merry Christmas!

[benoitranque]

One way I saw this was done was using the meta property of the routes. Something like this

// router.js
const routes = [
  {
    path: '/route',
    component: load('Component1'),
    meta: {
      tabs: [
        {
          path: '/route/tab1',
          component: 'Component2'
        },
        {
          path: '/route/tab2',
          component: 'Component3'
        }
      ]
    },
    children: [
      {
        path: 'tab1',
        component: load('Component2'),
        meta: {
          tabs: [
            {
              path: '/route/tab1',
              component: 'Component2'
            },
            {
              path: '/route/tab2',
              component: 'Component3'
            }
          ]
        }
      },
      {
        path: 'tab2',
        component: load('Component3'),
        meta: {
          tabs: [
            {
              path: '/route/tab1',
              component: 'Component2'
            },
            {
              path: '/route/tab2',
              component: 'Component3'
            }
          ]
        }
      }
    ]
  },
  {
    // no tabs
    path: '/route2',
    component: load('Component4')
  }
]

<q-tabs v-if="$route.meta && $route.meta.tabs && $route.meta.tabs.length">
  ...
</q-tabs>

As this means a lot of repetition in router.js, you probably wan a function to help you with it.

const pages = [
  {
    hash: 'route1',
    title: 'Main page',
    tabs: [
      {
        hash: 'tab1',
        title: 'Tab 1 Page'
      },
      {
        hash: 'tab2',
        title: 'Tab 2 Page'
      }
    ]
  },
  {
    hash: 'route1',
    title: 'Another Page'
  }
]
const routes = []
pages.forEach(page => {
  let route = {
    component: load(page.hash),
    path: page.hash,
    meta: {
      tabs: page.tabs
    }
  }
  if (page.tabs && page.tabs.length) {
    route.children = []
    page.tabs.forEach(tab => {
      route.children.push({
        component: load(tab.hash),
        path: tab.hash,
        meta: {
          tabs: page.tabs
        }
      })
    })
  }
  routes.push(route)
})
// routes object now ready

[D3myon]

@benoitranque thank you for your answer and time. I will try this solution this evening and revert after that.

[D3myon]

@benoitranque So, I took a look now. This is exactly what I was looking for. Thank you so much.