nuxt.js（vue.js）では、リフレッシュ（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（）から アキシオにロードされました。

なぜasyncDataが問題を引き起こすのですか？

Answer 1

routerは必要ありません。 Nuxtには、パラメータをキャッチするヘルパーが含まれています。

ページ・ファイルの名前は、PARAMを取得するには、次に_name.vue、
でなければならない、あなたは直接context.params.nameを使用することができます。

ダイナミックルートに関するドキュメント読む：もう一つのポイントhttps://nuxtjs.org/guide/routing#dynamic-routes

---

を、あなたのコードを簡素化するためにES6によって提供される利点を享受;-)

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