Here’s an example how I am using quasar-layout
I am using one root page which is my home page (index.vue).
From this root page, I’m jumping into the main entities of my app using a left side bar.
Here’s an example
my router .js is set up like this:
// HOME
'/': {
component: load('index')
},
// LIST VIEW
'/skill/list': {
component: load('skill/SkillList')
},
// DETAIL VIEW
'/skill/detail': {
component: load('skill/SkillDetail'),
}
}
...
index.vue (home)
<template>
<quasar-layout>
<!--HEADER -->
<div slot="header"
class="toolbar">
<button class="left-drawer-opener">
<i>menu</i>
</button>
<quasar-toolbar-title :padding="1">
SkillDance
</quasar-toolbar-title>
<button>{{connected}}</button>
</div>
<!-- LEFT SIDE BAR (IMPORTED COMPONENT) -->
<left-side-bar></left-side-bar>
<!-- NEXT IS VERY IMPORTANT TO UNDERSTAND.
// I am using <div class="layout-view"> here. This means that when I jump to 'skill/list',
I am actually switching from one quasar layout to another. In your case, you would want to use
<router-view class="layout-view"></router-view> here, which will make the user stay on index.vue,
and seeing 'skill/list' "embedded" in index.vue. Of course depending on how you set up router.js
-->
<div class="layout-view">
<h1>Home (index.vue) </h1>
<p> and any content I'd like to show here without using router-view</p>
</div>
</quasar-layout>
</template>
LeftSideBar.vue (actually holds all the main navigation nodes )
<template>
<div>
<quasar-drawer>
<div class="toolbar">
<sign-out-button></sign-out-button>
</div>
<div class="list platform-delimiter">
<quasar-drawer-link v-link="{path: '/', exact: true}"
class="title-color"
icon="home">
Home
</quasar-drawer-link>
<quasar-drawer-link v-link="{path: '/skill/list', exact: true}"
class="title-color"
icon="gps_fixed">
Skills
</quasar-drawer-link>
<quasar-drawer-link v-link="{path: '/training/list', exact: true}"
class="title-color"
icon="linear_scale">
Training Tracks
</quasar-drawer-link>
<quasar-drawer-link v-link="{path: '/user/account/profile', exact: true}"
class="title-color"
icon="account_circle">
Account
</quasar-drawer-link>
</div>
</quasar-drawer>
</div>
</template>
SkillList.vue (separate quasar layout)
As you can see I’m using exact the same page layout here as in index.vue (left drawer etc.)
In this case, in index.vue, I might as well could have chosen to use…
<router-view class=“layout-view”>
instead of…
<div class=“layout-view”>
I guess as a rule of thumb you could use <router-view> as long as the main page layout stays the same
in terms of components used (nav tabs, drawers, footer etc)
If you need a different layout setup for a particular page, create a new <quasar-layout> for it and make your router.js
jump to that page instead of showing it inside a <router-view>
<template>
<quasar-layout>
<!--HEADER -->
<div slot="header"
class="toolbar">
<button class="left-drawer-opener">
<i>menu</i>
</button>
<quasar-toolbar-title>
<div class="title">Skills</div>
</quasar-toolbar-title>
</div>
<!-- LEFT SIDE DRAWER -->
<left-side-bar></left-side-bar>
<!--LAYOUT -->
<div class="layout-view">
<div class="list">
<skill-card v-for="skill in skillList"
:skill="skill"></skill-card>
</div>
</div>
</quasar-layout>
</template>
index.vue resides in ./src/components/index.vue
The rest of the file structure:
I haven’t tried v-if, but I see no reason why that wouldn’t work.
If you want to build v-ifs around tabs , drawers, footers etc, I would try different quasar layouts instead, unless it’s something trivial you need to do.
Hope this gets you on track.
