Currently, I am utilizing the Quasar drawer feature in my application. On the signup view, I would like to hide the drawer. While my current code successfully hides the drawer, an issue arises when I reload the signup page as it briefly renders in the DOM before disappearing.
I am unsure how to resolve this issue - ideally, I would like to prevent the drawer from rendering in the DOM at all or have more control over its visibility. One approach could be to set the drawer default to false and manually render it on specific routes.
<template>
<div>
<q-header elevated class="bg-indigo-4">
<q-toolbar>
<q-toolbar-title class="flex flex-center"></q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer
v-model="drawer"
v-if="!$route.meta.hideDrawer"
:width="300"
:breakpoint="400"
>
<q-scroll-area
style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd"
>
<drawer-navigation></drawer-navigation>
</q-scroll-area>
<drawer-header></drawer-header>
</q-drawer>
</div>
</template>
<script>
import DrawerNavigation from "@/components/navigation/DrawerNavigation";
import DrawerHeader from "@/components/navigation/DrawerHeader";
export default {
components: {
DrawerNavigation,
DrawerHeader
},
data() {
return {
drawer: true
};
}
};
</script>
router/index.js
{
path: "/employers/signup",
name: "EmployersSignup",
component: () =>
import(/* webpackChunkName: "about" */ "../views/EmployerSignup.vue"),
meta: { hideDrawer: true }
},