Quasar layout and vue-router issue



  • 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>


  • 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>


Log in to reply
 

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