menu
up-caret
down-caret

Vue.js

All things Vue.js

# Help

Questions surrounding Vue.js

Trending conversations
Building a Progressive Todo Web App with Vuetify, Vuex and GraphQL
@praveenweb · 7h
Why should I use Mixin. How to helpful for data sharing
@raj-js · 52d
How to create skeleton Loading in Vue
@armanshojaei · 13d
Data not shown after refresh
@armanshojaei · 22d
What's the best way to store and read 3rd party api keys?
@crawfordleeds · 31d

Combine data fetch before navigation with keep-alive routes

Jørn Knutsen (@jrn) · September 3, 2018 at 1:39pm

Combine data fetch before navigation with keep-alive routes

September 3, 2018 at 1:39pm

I'm currently trying out the async data fetching before navigation approach described in the router docs here: https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation

That's working out quite well. However, I would also like to combine that approach with keeping alive routes (https://vuejs.org/v2/api/#keep-alive), so I don't have to fetch the same data every time I go back to an already rendered route. But these two approaches apparently don't cooperate very well. Now, data is fetched every time I navigate back to the route, even though it is being kept alive. Is there some sane way to avoid refetching data using the beforeRouteEnter method?


September 4, 2018 at 4:55am

hi, just throwing an idea, what about storing the data after the first fetch data in vuex, then make simple if statement to check the data in your fetch data method, so you can determine when the component should fetch the data.

like-fill
1
  • reply
  • like

September 12, 2018 at 6:36pm

is your route parameterized in any way?

  • reply
  • like

Yeah, @ghapsara solution is pretty much the same route I would use as well. If not vuex even in also how are you passing your data around? route params?

  • reply
  • like

September 13, 2018 at 12:50pm

I solved it in a similar way to what @ghapsara suggests, however I would like to avoid Vuex. I just created a global object on the Vue object, that keeps track which routes that have been loaded and check against that when reentering the route.

like-fill
1
  • reply
  • like

Fantastic. Glad to hear you got it sorted.

  • reply
  • like