I am using nuxt.js.
Loads data from asyncData () of page component to axios.
async asyncData (context) {
const name = context.route.params.name
const response = await axios.get ('/ users /' + name)
return {
user: response.data.info
}
}
Navigate to when navigating to this page and the above code will work fine.
However, if you refresh (F5) on this page component,
const name = context.route.params.name
Gets the data in name.
const response = await axios.get ('/ users /' + name)
No parameter is passed in name.
That is, parameters are not passed to axios, and the server side does not receive param values.
To solve the above problem, the data was loaded from mounted () to axios.
Why does asyncData cause problems?
You don't need the
router
! Nuxt include an helper to catch parameters.The name of your page file must be
_name.vue
,Then, to get the param, you can directly use
context.params.name
.Another point, enjoy the advantages offered by the ES6 to simplify your code ;-)