Pass Data Between Routes In A Vue.js Web Application

Often, when building navigation into your application, you’ll find that you need to pass data from one screen to another. For example, maybe you’re following the master-detail pattern where you have a list of data and you get more information about a particular item in the list by drilling deeper.

We’re going to see how to pass data between routes in a Vue.js web application using a router and URL parameters as well as query parameters.

If you haven’t already read my previous tutorial or are unfamiliar with the vue-router library, I suggest you brush up on it. We’re going to start exploring quickly.

Using URL Parameters to Pass Data Between Routes

Let’s say you have a web application that displays a list of people obtained from some database. This list might only contain first and last name information, but the data in the database might have significantly more information such as address.

In a typical scenario, the primary key or some other identifier is maintained in the list of people and is used for querying the database when requesting the details. Simple values such as identifiers can be easily passed around as URL parameters.

To make this possible, the destination route needs to accept parameters. Extending the previously seen tutorial, we might alter our project’s src/router/index.js file to look like the following:

In the above snippet we are choosing to pass parameters to the named route. The id will match the parameter previously defined in the route definition. You could have more than one parameter, but use caution as they can easily get out of hand.

On the receiving end we need to figure out how to obtain and work with the route parameter.

Open the project’s src/components/page2.vue file and include the following:

We’ve added a few things in the above component versus what we had in the previous example.

First you’ll notice that we’re initializing an id value in the data method. This is to prevent any undefined errors from making an appearance.

When the component is created, the created method is called as per the Vue.js lifecycle hooks. In the created method we get the passed id value from the $route.params and set it to our local variable. This local id variable is rendered in the <template> block.

What if we want to pass more complicated data or even optional data? This is where query parameters come into play.

Using Query Parameters to Pass Data Between Routes

Query parameters in Vue.js work similar to router parameters with the exception that they are not required and the route doesn’t need to be altered before-hand.

Head back into the project’s src/components/page1.vue file and alter the <template> block to look like the following:

Just like with the router parameters, we’ve initialized a placeholder variable in the data method. In the created method we check to see if debug is present in the query parameters and if it is, set it to our local variable.

In the above <template> block we’re displaying the debug variable like we would any other variable.

Conclusion

You just saw how to pass data between routes in a Vue.js web application using URL parameters and query parameters. If you didn’t read my previous article on navigation, some of what you saw may not make a lot of sense. I encourage you to take a look at it if you haven’t already.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.