Welcome back to building web apps with Vue.js! If you want a refresher or missed a previous articles, here is Part 1 and Part 2.

In this article I’m going to show you how I rebuilt the previous application using vue-router to manage the state of the application instead of vuex. While you certainly could use both vuex and vue-router (and I will do so in the next article), it may not be necessary for your application. I also decided to use bootstrap to style the application this time, mostly to familiarize myself with it more, but also to build this new version quicker. If you want to test drive the application click here.

For me the number one reason to use a router library in a single page application is to give the user access to the browser’s navigation buttons. This was something sorely lacking in the previous application. To get this behavior a route has to be appended to the URL. In a traditional application a route represents a html view on the server. In a single page application routes are maintained in JavaScript and each route is matched to a component that should be rendered when the route is accessed.

Here I define the routes for my two use cases. The first route is for the detail view, it has search type and search result id as route parameters. The second route represents the search results view, it contains search type and the query string the user entered as route parameters. These route parameters are how I will manage the state of the application. When a route is updated the components will render themselves according to these parameters. To use the routes I’ve defined here, I’ll need to add them to the main vue instance.

Regardless of the route I always want to show the app component, so the vue instance will still render that in the app div when it loads. The app component will be responsible for switching the other components when the route changes. To make this happen, App component needs to render a router-view component which is provided by the vue-router library.

With the routing in place the next step would be to determine when a route changes, and how components react to a route change. The search box is the primary way for a user to interact with the application. So when the search button is clicked or the search type is changed, the route is updated to reflect the user’s inputs and the search results component re-renders.

This snippet from the template of SearchBox.vue shows how you can change a route with the router-link component provided by vue-router.

It is also possible to change a route programmatically. Vue made $router available when the router I configured above was added to the vue instance. Calling push puts the new route into the browser’s history stack and makes the route active. Now let’s look at the search results component to see how it reacts to route changes.

Within the created life cycle hook I call a routeChanged function. This function gets the type and query the user is searching by from the route parameters and then fetches data according to those parameters. This isn’t enough though, created is only called when search results is added to the DOM. To make search results aware of a route change while it is active I use the watch object to monitor $route. Now when the application’s route is updated search results routeChanged function will be called.

Hopefully this article has helped you get an idea of how to setup and use vue-router to navigate between components and keep them in sync. If you would like a more detailed look at this application you can find the source code here.

That’s all for now, remember to share your comments, criticism, and suggestions with me here or on twitter Frank A Wilkerson and check out my youtube for more developer content.