nuxt.js (vue.js)에서 refresh (F5)에 매개 변수가 전달되지 않습니다.

Question

nuxt.js를 사용하고 있습니다.

페이지 구성 요소의 asyncData()에서 axios로 데이터를로드합니다.

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

이 페이지로 이동하면 위 코드가 올바르게 작동합니다. 현재 페이지의 구성 요소 (F5)를 새로 고치면

그러나

const name = context.route.params.name 

이름에서 데이터를 가져옵니다.

const response = await axios.get ('/ users /' + name) 

매개 변수는 이름에 전달되지 않습니다.

즉, 매개 변수가 액시오에 전달되지 않으며 서버 쪽에서는 이 매개 변수 값을 수신하지 않습니다.

위의 문제를 해결하기 위해 데이터를 mounted()에서 axios로로드했습니다.

왜 asyncData가 문제를 일으키는 지?

Answer 1

router! Nuxt는 매개 변수를 잡는 도우미를 포함합니다.

페이지 파일의 이름은 직접 context.params.name를 사용할 수 있으며, PARAM를 얻기 위해, 그리고 _name.vue,
을해야합니다.

동적 경로에 대한 문서 읽기 : https://nuxtjs.org/guide/routing#dynamic-routes

---

또 다른 점은, 코드를 ;-)

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