@Hamid Your q-header should be a direct child of q-layout. There’s two good options to doing this.
First option
Use vue-router named views. In this case, you separate the page body and header into settings-page.vue (root tag is q-page) and settings-header.vue (root tag is q-header). In your routes file, something like this:
const router = new VueRouter({
routes: [
{
path: '/settings',
components: {
default: () => import('pages/settings-page.vue'),
header: () => import('pages/settings-header.vue'),
}
}
]
})
and in MainLayout.vue:
<template>
<q-layout view="lHh Lpr lFf">
<router-view name="header" />
<q-drawer>
...
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
That will inject the settings-header.vue component into the first router-view and the page into the second router-view. This way you can make different headers, or no header at all, based on the route.
Read more: https://router.vuejs.org/guide/essentials/named-views.html
Second option
Use vue-portal. In this case, you keep the q-header in your current component, but wrap it in a portal tag. In your settings component, it would look like this:
<template>
<q-page class="q-pa-md">
<portal to="header">
<q-header elevated class="bg-yellow">
<q-toolbar>
<q-btn flat round dense icon="arrow_back_ios" text-color="grey" class="q-mr-sm" @click="$router.go(-1)"/>
<q-toolbar-title class="text-grey text-center text-bold">Options</q-toolbar-title>
<q-btn flat round/>
</q-toolbar>
</q-header>
</portal>
<h6 class="text-bold text-grey">{{surah.name_simple}}</h6>
<q-list bordered separator class="surah-list">
....
</q-list>
</q-page>
</template>
And in main layout:
<template>
<q-layout view="lHh Lpr lFf">
<portal-target name="header"></portal-target>
<q-drawer>
...
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
For this, you must install with yarn add portal-vue then make a boot file at src/boot/portal.js with contents:
import PortalVue from 'portal-vue'
export default({ Vue }) => {
Vue.use(PortalVue)
}
And make sure to add 'portal' to the boot array in quasar.conf.js
Read more: https://github.com/LinusBorg/portal-vue
For your case, I probably recommend the first option as it is built in to vue-router. I would recommend the second case if the header needed to call methods of the page, or share data that you don’t want in vuex, etc.
