How to link in Click trigger Layout Drawer ?

  • Hello, I’m discovering Quasar and try to use a “Mini-mode with click trigger”

    I’ve made links with the router and it’s working fine when the drawer is deployed.
    My pages are displayed in the QPage Container.

            enter-active-class="animated fadeOut"
            leave-active-class="animated rotateOut"
            <router-view />

    The problem is when I minify the menu with just the icons. When I click on an icon :

    • the whole page is blank,
    • the whole page appears, with the correct link,
    • the menu is deployed

    How could I avoid this flashing page reload ?

    Here is my code, loading the menu structure from data.
    Thanks for help.

      title: "Page1",
      caption: "blabla",
      icon: "favorite",
      iconColor: "pink",
      link: "page1",
      separator: false

    MainLayout Q-drawer :

          :mini="!leftDrawerOpen || miniState"
          <q-scroll-area class="fit">
            <q-list padding>
                v-for="link in menuLinks"
          <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
            <q-btn dense round unelevated color="accent" icon="chevron_left" @click="miniState = true" />

    Menu template :

        <q-item clickable :to="link">
          <q-item-section v-if="icon" avatar>
            <q-icon :name="icon" :color="iconColor" />
            <q-item-label>{{ title }}</q-item-label>
            <q-item-label caption>{{ caption }}</q-item-label>

  • @Incremental

    The problems you are describing are very hard to solve with just some lines of code. If you create a we are able to help you better .

  • This post is deleted!

  • I created the following Codesandbox where you can see the problem.


Log in to reply