Multiple Layouts

krsyoung

Hello, I’m experimenting with Quasar to build an authenticated app. The basic idea is to have the initial login screen (available to everyone, no header / footer) followed by some number of authenticated screens (header / nav / footer).

I have two layouts, one with nothing (i.e. for the login screen) and a second that would then be applied to all authenticated screens.

The problem is I can’t figure out how to switch between them. Any guidance on how I would apply the ‘blank’ layout to the login view and the ‘default’ layout to all others?

Thanks!

rstoenescu

Hi,

This is a matter of routes structure (/src/routes.js). Example:

{
    path: '/login',
    component: load('loginLayout'), // /src/loginLayout.vue
    children: [
      {path: 'about', component: load('test-layout/about')},
      {path: 'layout', redirect: '/test-layout/about'},
      {path: 'toolbar', component: load('test-layout/toolbar')},
      {path: 'tabs', component: load('test-layout/tabs')},
      {path: 'drawer', component: load('test-layout/drawer')}
    ]
  },
  {
    path: '/app',
    component: load('secondLayout'), // /src/secondLayout.vue
    children: [
      {path: 'a', component: load('web-tests/a')},
      {path: 'b', component: load('web-tests/b')},
      {path: 'c', component: load('web-tests/c')}
    ]
  }

In this case /login/about (along all siblings) uses loginLayout while /app/a (along its siblings) uses secondLayout.

No More Posting New Topics!

Multiple Layouts