Fetching data before switching route

In the previous version of Vue, we had a dedicated method to fetch data from the Internet before changing the route. With Vue 2, we have a more general method that will take care of this and possibly other things before switching route.

Getting ready

To complete this recipe, you are expected to already know the basics of vue-router and how to make AJAX requests (more on this in the last chapter).

How to do it…

We will write a simple web portfolio composed of two pages: a home page and an about me page.

For this recipe, we will need to add Axios as a dependency.

The basic layout is clear from the following HTML code:

<div id="app">
  <h1>My Portfolio</h1>
  <ul>
    <li><router-link to="/" exact>Home</router-link></li>
    <li><router-link to="/aboutme">About Me</router-link></li>
  </ul>
  <router-view></router-view>
</div>

In the JavaScript, you can start building...