In nuxt.js (vue.js), no parameters are passed in refresh (F5)

Question

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?

Answer 1

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.

Read the doc about dynamic routes : https://nuxtjs.org/guide/routing#dynamic-routes

---

Another point, enjoy the advantages offered by the ES6 to simplify your code ;-)

async asyncData ({ params }) {
  const { data } = await axios.get ('/users/' + params.name)
  return {
    user: data.info
  }
}