Vue.js(Nuxt.js)を使って、URLから値を渡す方法は以下の２種類があります。
パスパラメータを使う時はurlの後ろにそのまま値がつきます。例)/user/123
クエリパラメータを使う時はキーと一緒にURLに付与されます。例)/user/?role=admin
ではどういう時にその2つを使い分けるか。API設計を行う際は知っておく必要があります。
本記事の最後にAppendixとして記述しておりますので、ぜひご一読ください。
// 1. パスパラメータ -> /user/123になる
$router.push({name: 'user', params: {userId: '123'}})
// 2. クエリ -> /user?userId=123になる
$router.push({path: 'user', query: {role: 'admin'}})
これをrouter-linkまたはnuxt-linkで行ったものが以下。
<!-- 1. パスパラメータ -->
<router-link
:to="{name: 'register', params: {userId: 123}}"
>Sample</router-link>
<!-- 2. クエリ -->
<router-link
:to="{name: 'register', query: {role: 'admin'}}"
>Sample</router-link>
1のパスパラメータは$route.paramsの中に入っています。
<!-- 1の受け取り方 -->
<template>
<section>
<p>{{ $route.params.userId }}</p>
</section>
</template>
2のクエリは$route.queryの中に入っています。
<!-- 2の受け取り方 -->
<template>
<section>
<p>{{ $route.query.role }}</p>
</section>
</template>
ではどういう時にその2つを使い分けるか。API設計を行う際は知っておく必要があります。
パスパラメータは、あるデータに一意な情報でアクセスする時に使います。
以下のようなユーザーデータがあった時、user_idが定まれば対象のユーザーが一人だけ定まります。このような時、userデータにおいてuser_idは一意な情報と言えます。
| user_id | name | role |
|---|---|---|
| 1 | nameA | admin |
| 2 | nameB | slave |
| 3 | nameC | slave |
この時、ある一人のユーザーの情報にアクセスしたい時には、パスパラメータを使うよう設計するのが適切とされます。
例)/user/1
クエリパラメータは、あるデータを操作して取得したい時、手がかりとなる情報を渡すために使います。
先ほどのデータで、roleがadminのユーザーだけを取得したい時、{role: admin}といった情報をクエリパラメータで渡します。
例)/user/?role=admin