で実行するnuxt generate
とtarget: "static"
、nuxt.config.js
動的に作成されたルートはペイロードを受け入れません。次のようになります。
****nuxt.config.js****
generate: {
routes() {
return axios
.get(`${process.env.ROOT_URL}/businesses`)
.then(res => {
return res.data.map(business => {
return {
route: `/business/${business.id}`,
payload: business
};
});
});
}
}
****business.vue****
async asyncData({ params, store, error, payload }) {
if (payload) {
console.log('GOT PAYLOAD!', payload);
return { business: payload };
} else {
// other stuff
}
})
上記の console.log の間nuxt generate
、動的ルートごとにヒットするため、正しいペイロードを受け取っていることがわかります。
nuxt generate
私dist
のフォルダーには動的ルートごとのサブフォルダーがありますが、for index.html
each には 内に数行しかなく、ブラウザーでそれぞれのページにアクセスすると、動的ルートに固有のコンテンツは表示されません (私のlayout
コンポーネントのナビゲーションバーは正常に表示されます) )。
アプリのナビゲーションは正常に機能するため、別のページに移動して動的ルートのコンテンツにアクセスすると、コンテンツが表示されるのでasyncData
、ペイロードを受け入れるのが面倒です。
target: "static"
物事が期待どおりに機能しない場合、 index.html
for each にdist
は十分な情報が含まれており、ページにアクセスすると目的のコンテンツが読み込まれますが、head()
business.vue のメソッドは生成されません (これに関する私の質問を参照してください)。
誰かが私が見逃している/間違っていることを指摘できますか?