How to go to a q-tab using url (quasar framework)

Question

I have three q-tab on top of the homepage. let's say car, bus, bike. if I click on the car tab it shows the car data, if clicked on the bus tab, it shows the bus data, if clicked on the bike tab it shows the bike data without refreshing the page.

<q-tabs v-model="tab" dense align="justify" narrow-indicator>
      <q-tab name="car_list" label="Car list" icon="fas fa-car"></q-tab>
      <q-tab name="bus_list" label="Bus list" icon="fas fa-bus"></q-tab>
      
      <q-tab name="bike_list" label="Bike list" icon="fas fa-motorcycle"></q-tab>
    
    </q-tabs>

Every time I visit the home page it always shows the car data by default. The problem is let's say I clicked the bike tab , and from there I clicked on one entry which opens another page containing information regarding the clicked bike, there is a back button on the page(here I can put the link, and it is linked to the homepage). When I click on the back button it goes back to the home page, and the car tab data is loaded. but as I was on the bike tab, I want the back button to take me to the bike tab instead of the car tab.

Here my question is there any way to create a link to the tab, so that when I can put that in the back button and it can go back to the tab I want.

(I am not sure if I have made it clear, if not please let me know if you have any suggestion or query)

Answer 1

The reason it is doing that is because the v-model="tab" is bound when the Vue component is created. It will be initially set to the default ( car_list ) whenever it is created. When thecomponent is destroyed any internal state will be lost. You can do a couple of things:

1. Ensure that the component is not destroyed (not sure what your architecture is like) (You can check whatever host component it is being used on the life cycle hook destroyed )

2. You can move the tab property into state management such as Vuex or a higher parent component that will retain its life and will not be reset from traversing the SPA.

(If you still want the data to persist between page loads in between your page and other external pages you can consider persisting the tab state to local storage)

Answer 2

I solved this using Vuex and a Watcher

watch: {
    tab: function (newValue, oldValue) {
      if (!oldValue && this.$store.state.yourCurrentlySelectedTab) {
        this.tab = this.$store.state.yourCurrentlySelectedTab
      } else {
        this.$store.dispatch('YourActionThatSetsTheCurrentTab', newValue)
      }
    }
  }

If the old value of tab is null , which it will be when first navigating to the component or navigating back to the component, and there is a value for the current tab saved in the Vuex store, it will set the value of tab to the value from the store state. Otherwise it will write the new value, which should be the result of a user click, to the store.