Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

Why do we match two different things? It depends on how you wrote the router link.

<li><router-link to="/" exact>Home</router-link></li>

The preceding code will be translated in the following DOM portion:

<li><a href="#/" class="router-link-active">Home</a></li>

While:

<router-link tag="li" to="/" exact>Home</router-link>

Becomes:

<li class="router-link-active">Home</li>

Note how in the first case, the class is applied to the child anchor element; in the second
case, it is applied to the parent element.

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>