Nuxt/examples/custom-routes/pages/users/_id.vue
2017-10-31 21:43:55 +08:00

35 lines
677 B
Vue

<template>
<div class="user">
<h3>{{ name }}</h3>
<h4>@{{ username }}</h4>
<p>Email : {{ email }}</p>
<p><nuxt-link to="/">List of users</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
validate({ params }) {
return !isNaN(+params.id)
},
async asyncData({ params, error }) {
try {
const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
return data
} catch (e) {
error({ message: 'User not found', statusCode: 404 })
}
}
}
</script>
<style scoped>
.user {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
</style>