画像


画像




Nuxt.jsでページをクエリストリングで動的に追加するメモ。




画像




pagesディレクトリに、今回は「query.vue」任意ファイルを追加

画像




query.vue


<template>

<h3>{{query_add}}</h3>

</template>


<style>

h3 {
color: #ff4500;
}

</style>


<script>

export default {
asyncData(context) {
return {
query_add: context.query['id']
}
}
}

</script>




Nuxt.jsでページをクエリストリングで生成した場合は、静的ファイルを生成時にも動的に処理されるので「nuxt.config.js」を修正する必要はありません。









Q&A