Vue Router Patterns Chapter 20{
id: 1,
name: 'Leanne Graham',
}
],
};
},
};
</script>Feel free to add your own test data at this point. We'll be requesting this data from the API
momentarily.
As we've created our component, we can then add a route to user.routes.js, which
displays this component whenever the '/' (or a path of your choice) is activated:
import UserList from './UserList';export const userRoutes = [{ path: '/', component: UserList }];In order to show this route, we need to update App.vue to subsequently inject the content
into a router-view node. Let's update App.vue to handle this:
<template>
<div>
<router-view></router-view>
</div>
</template><script>
export default {};
</script><style></style>Our application should then display a single user. Let's create an HTTP utility to get data
from an API.
Getting data from an API
Create a new file under src/utils named api.js. This will be used to create a base
instance of Axios, which we can then perform HTTP requests on:
import axios from 'axios';