Fetch data after vue-router tab navigation?

  • I’ve set up my layout with tabs for navigating subroutes as per http://quasar-framework.org/components/tabs.html.

    I have it set up like this:

    <q-layout ref="layout" view="hHh Lpr lFf">
    <router-view />
    <q-tabs slot="footer" inverted class="bg-white">
      <q-route-tab default to="team" slot="title" name="tab-1" icon="list" label="My Team" />
      <q-route-tab to="league" slot="title" name="tab-2" icon="star" label="League" />
      <q-route-tab to="draft" slot="title" name="tab-3" icon="view_comfy" label="Draft"/>
      <q-route-tab to="players" slot="title" name="tab-4" icon="person" label="Players" />

    My issue is that I want to perform an api call to load data on each subroute. I have it set up as per here: https://router.vuejs.org/en/advanced/data-fetching.html. I want to fetch data after navigation. So the desired behavior is that when I click a tab, the tab (and route) becomes active, a loading spinner is shown until the data is loaded. I followed the recommendations on the vue router page, and my subroutes contain this (as well as a method that calls my api to fetch data):

    created () {
      // fetch the data when the view is created and the data is
      // already being observed

    I also call the quasar “Loading” component in my fetchdata method. My problem is that it seems like the navigation doesn’t happen until after the data is loaded. When I click a tab, theres a pause for about 1-2 seconds, then the new tab becomes active. I never see the Loading spinner.

    Is this an issue with quasar, or vue-router? Am I just doing something wrong somewhere?

  • So I figured it out. Ad of course, the error was in the fetchData method, which I didn’t even post above for some reason.
    The problem was that I was checking LocalStorage to see if data existed before performing the api call. For some reason, having this check in my fetchData method causes the navigation to hang for some reason. Deleting it gives proper behavior. Here’s what I had originally:

    fetchdata (requestParams, lastCall) {
      if (LocalStorage.has(requestParams.TYPE)) {
        let localData = LocalStorage.get.item(requestParams.TYPE)
        this.$store.commit('SET_DATA', {type: requestParams.TYPE, data: localData})
        if (lastCall) {
          this.dataLoaded = true
      else {
        var url = 'https://myapi.com/export'
        this.axios.get(url, {
          params: requestParams
          .then((response) => {
            var responseData = JSON.parse(response.data)
            LocalStorage.set(requestParams.TYPE, responseData[requestParams.TYPE])
            this.$store.commit('SET_DATA', {type: requestParams.TYPE, data: responseData[requestParams.TYPE]})
            if (lastCall) {
              this.dataLoaded = true
          .catch((error) => {
            if (error) {
              Toast.create("Can't fetch " + requestParams.TYPE + ' data')

    Deleting that if/else block and the localStorage check makes things work as expected. However, the problem is now that I have to make an api call every time I change tabs, rather than load local data. Any ideas on how I should check for local data?

Log in to reply