Going back to tab loses the active tab

  • I have been trying to figure out how to make a tab sticky once I have navigated to a new page and then go back in history.

    Say I am on a page that contains q-tabs and q-tab-panels. Once the page is first loaded a default tab is set to active using v-model on q-tabs. When I navigate away and then go back, the same (default) tab is set as active, although I was in fact on a different tab before I navigated away. I would like that when I go back the same tab shows as active.

    Below a simplified version of my code to demonstrate the issue.

          <q-tab exact name="tab1" label="Tab 1" icon="some-icon"/>
          <q-tab exact name="tab2" label="Tab 2" icon="some-icon"/>
          <q-tab exact name="tab3" label="Tab 3" icon="some-icon"/>
        <q-tab-panels v-model="tab" class="bg-white">
          <q-tab-panel name="tab1">
              <some-component v-for="datablock in datablocks" :key="block.id" :props="datablock"></some-component>
        export default {
          data() {
            return {
              tab: 'active-loads', // This is the default active tab

    Each one of the instances of some-component can be clicked on and then navigate to another page at /block/:id. On that page I have a link that has a @click="$router.go(-1)" action. When I click on that link I am indeed taken back to the page that contains the q-tabs, alas to the ‘default’ tab and not the one that was active before I navigated away. I cannot seem to be able to figure out to render the last active tab as active when I go back to the q-tabs page. Any ideas?

    Any help very much appreciated.

  • @afotoglidis use vuex to store your last active tab state.

  • I see, thanks for the tip. I’m not experienced with Vuex, does it persist state between page reloads and/or moving back and forth between different layouts?

  • @afotoglidis nope it doesn’t, but you can use a vuex plugin called vuex-persistedstate to store your states in localStorage https://github.com/robinvdvleuten/vuex-persistedstate.

  • @metalsadman I see, after a quick look seems like it’s the solution to my issue. Thanks for the help!

Log in to reply