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

Vue Router Patterns Chapter 20

export const API = axios.create({

baseURL: `https://jsonplaceholder.typicode.com/`

})

We can then use the beforeRouteEnter Navigation Guard to get user data whenever

someone navigates to the '/' route:

<template>

<ul>

<li v-for="user in users" :key="user.id">

{{user.name}}

</li>

</ul>

</template>

<script>

import { API } from '../../utils/api';

export default {

data() {

return {

users: [],

};

},

beforeRouteEnter(to, from, next) {

API.get(`users`)

.then(response => next(vm => (vm.users = response.data)))

.catch(error => next(error));

},

};

</script>

We then find that we get a list of users on screen, as illustrated in the following screenshot,
each represented as a different list item. The next step is to create a detail component,

register the detail route, and find a way to link to that route: