Multiple Layouts
-
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!
-
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) usesloginLayout
while/app/a
(along its siblings) usessecondLayout
.Read more about nested Vue routes.
-
Perfect, that is what I needed (I was down that path but aborted at some point). Thanks @rstoenescu, I will follow-up with any other details that might help others.