Vue.js 2 Cookbook

How to do it…

As said, we will edit the resulting code from the Fetching data before switching route recipe to manage errors. Just so you remember, when going to the /aboutme page, we were loading information from the Internet. We want to avoid going to that page in case the information is not available.

For this recipe, add Axios as a dependency, as done in the previous recipes.

First, enrich the HTML layout with the highlighted 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 class="toast" v-show="showError">    There was an error  </div></div>

This is a toast message that will appear on the ...