Routing

In this section, you’ll learn how to use the vue-router library with Apollo to implement some navigation functionality!

Create a Header

Before moving on to configure the different routes for your application, you need to create an AppHeader component that users can use to navigate between the different parts of your app.

This simply renders two RouterLink components that users can use to navigate between the LinkList and the CreateLink components.

Setup routes

You’ll configure the different routes for the app in src/router/index.js.

Let’s take a closer look to better understand what’s going on:

1. Here you import the CreateLink and LinkList components which will be rendered for different routes
2. Here you map each route to the component that should be rendered
3. Here you set mode to ‘history’ to remove the hash from the URLs

You now need to make some small updates to src/main.js.

You need to update one more file, src/App.vue.

That’s it. You can now access two URLs: http://localhost:8080/ will render LinkList and http://localhost:8080/create will render the CreateLink component you just wrote in the previous section.

Implement navigation

To wrap up this section, you need to implement an automatic redirect from CreateLink to LinkList after a mutation is performed.

Let’s unpack what’s going on here:

1. You add an update method which queries the current cache (store) and updates it with the result of your mutation.
2. Here you define a success handler which routes to / upon a successful mutation
3. Here you define an error handler which logs the error when a mutation fails

After the mutation is performed, vue-router will now navigate back to the LinkList component that’s accessible on the root route: /.