Vue router async route guard progress

1
votes

I'm doing async work in my router's navigation guard:

router.beforeEach((to, from, next) => {
  somethingAsync().done(next)
})

Does the router expose anything to tell me that it's currently "loading"? Or do I need to keep track of it myself? Right now the content will pop up in<router-view></router-view> once the async work is completed. My current solution is to keep track of active work in my Vuex store and show a loading element next to the router view.

1
javascriptvue.jsvue-routervuex

1 Answers

3
votes

What I do to achieve what I think you are trying to is this:

  • Use Axios or something else that has interceptors https://github.com/mzabriskie/axios
  • Have a component that have a counter of pending requests. When that counter is higher than 0, show the loading element.
  • After that all you have to do is configure the interceptors so that when a request is made the counter goes up, and when a response is received the counter goes down.

I could show you some code if you need.