How to keep Quasar tab panel's current tab on page refresh

Question

I'm working on a Vue.js 2 application, and I'm having difficulties handling page refresh/reload properly. There are three issues:

• Loss of current route
• Loss of router params
• Loss of selected tab on QTabPanel component

I managed to solve the second problem by saving the router params on a Vuex store, but I don't know how to solve the other two. I thought of storing also the selected Quasar's tab on Vuex, but it could be annoying, giving the fact that, on some components, I have multiple levels of nested tab panels. I also don't know how to make the application stay on the current route after refreshing (I'm using history mode). Could someone please give me a hint?

Answer 1

Generally speaking, you need to add a query parameter to your route that indicates the tab you are on. Then update it when you change tabs and then change the tab on the page based on its value.

Since you're already using Quasar, QRouteTabs do this pretty much for you (https://quasar.dev/vue-components/tabs#qroutetab-api)

Something like this:

<q-tabs v-model="tab" >
   <q-route-tab :to="{query: { tab: 1 }}" name="tab1" label="Tab 1" />
   <q-route-tab :to="{query: { tab: 2 }}" name="tab2" label="Tab 2" />
</q-tabs>