In this section, you’ll learn how to use the
vue-router library with Apollo to implement some navigation functionality!
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
You’ll configure the different routes for the app in
Let’s take a closer look to better understand what’s going on:
LinkListcomponents which will be rendered for different routes
You now need to make some small updates to
You need to update one more file,
That’s it. You can now access two URLs:
http://localhost:8080/ will render
http://localhost:8080/create will render the
CreateLink component you just wrote in the previous section.
To wrap up this section, you need to implement an automatic redirect from
LinkList after a mutation is performed.
Let’s unpack what’s going on here:
updatemethod which queries the current cache (
store) and updates it with the result of your mutation.
/upon a successful mutation
After the mutation is performed,
vue-router will now navigate back to the
LinkList component that’s accessible on the root route: