見出し画像

【Nuxt3】URLからパラメータを受け取る

https://example.com/user/{任意の文字列}  のようなURLから{任意の文字列}に合うユーザーの情報を取得して表示したりする場面がよくあるので、この機能のどのように開発するのか紹介します。

Vueファイル作成

[id].vueというファイルを作成します(今回は、/pages/user/[id].vueを作成)

Vueファイル内で受け取る

// [id].vue

<script lang="ts" setup>
const id = useRoute().params.id
</script>

これでidを受け取れるので、後はこの情報を使って、DBにアクセスしたり、<templete>内でUIに使うことができます。

この記事が気に入ったらサポートをしてみませんか?