Slackコミュニティに

無料で参加する

Flutterラボの

プレミアム会員になる

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

2023.06.04

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に使うことができます。

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/