Quasar layout and vue-router issue

[jctrebalag]

Hi all,
I’m currently dealing with an issue while trying to apply a layout to all my pages. The layout appears but the content doesn’t (e.g. root route).

Is it the best way to add my layout on all my views ? Doc isn’t really clear on this point (at least for me)

Thanks in advance for your help !

My router is as following:

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        nav: load('Layout/Navigation'),
        default: load('Home/Home')
      }
    },
   {
    path: '/home',
    name: 'home',
    title: 'Accueil',
    component: load('Home/Home')
  },
// Always leave this last one
  { path: '*', component: load('Error404') } // Not found
 ]
})

App.vue :

<template>
  <!-- Don't drop "q-app" class -->
  <div id="web-app">
    <router-view name="nav" />
  </div>
</template>

Navigation.vue:

<q-layout>
  header...

  <router-view />

  footer...

</q-layout>

[jctrebalag]

Problem solved ! I ended up with the following for my router :

export default new VueRouter({
mode: ‘history’,
routes: [
{
path: ‘/’,
component: load(‘Layout/Navigation’),
children: [
{
path: ‘’,
component: load(‘Home/Home’)
},
{
path: ‘home’,
name: ‘home’,
title: ‘Accueil’,
component: load(‘Home/Home’)
}
]
},
// Always leave this last one
{ path: ‘*’, component: load(‘Error404’) } // Not found
]
})
and in App.vue:

<template>
<div id=“web-app”>
<router-view />
</div>
</template>