Q:

Vue router async route guard progress

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.

A:

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.

