Vue router async route guard progress

Question

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.

Potray · Accepted Answer · 2017-08-01 08:03:24Z

3

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.

answered Aug 1, 2017 at 8:03

Potray

1,99817 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johan Over a year ago

Yeah that it what I do in my Vuex store today :) I was curious if something was built in so I'm not reinventing the wheel

Collectives™ on Stack Overflow

Vue router async route guard progress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related