Vue.js Developers
Published in

Vue.js Developers

Vue Router: Route Resolvers

Vue Router

In the most simplest of terms, I’d say a Router Resolver allows you to get data before navigating to the new route.

One way to deal with getting and displaying data from an API is to route a user to a component, and then in that component’s created hook call a method in a service to get the necessary data. While getting the data, perhaps the component can show a loading indicator.

But, in cases where you want the API data to be fetched before the component is initialised, this strategy fails and this is where Route Resolvers are used.

Vue Router provides beforeEnter hook to take action before a route is resolved, we can use this hook as a point to bind our route resolver.

Vue Router Hook

The resolver function is going to do the API calling stuff to resolve and set data in the destination route’s meta key.

Route’s Meta is an object that contains additional information related to a route. We will utilise this object to store our data.

Route Resolver

In the above code, getList is a function that returns Promise<List> and we await for the data to be resolved before we call next() to resume the routing.

Now, in the component we can consume the data by reading it from the route’s meta.

Data Consumption

So, this is how we can create and use Route Resolvers in Vue.Js.

Hope, you liked this article. Don’t forget to 👏 .

Connect with me





Helping web professionals up their skill and knowledge of Vue.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store