<template>
<q-page class="q-pa-md">
<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>
<h6 class="text-bold text-grey">{{surah.name_simple}}</h6>
<q-list bordered separator class="surah-list">
<q-item clickable v-ripple @click="$router.push({ name: 'select-aya-from', params: { surah: surah } })">
<q-item-section>
<q-item-label>Aya from</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="$router.push({ name: 'select-aya-to', params: { surah: surah } })">
<q-item-section>
<q-item-label>Aya to</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-page>
</template>
The q-header is inside the q-page.
One thing to note is that it only happens if I’m using keep-alive on router-view and only when you navigate back to the page which has the q-header.
The problem doesn’t occur on the first page load but if you navigate away and then back, you will see that they q-page is underneath q-header.