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.
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).
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...