Nuxt 3は、Vue.jsをベースにした強力なフレームワークで、動的ルーティングの実装が非常に簡単です。動的ルーティングを使用することで、ユーザーの入力やデータベースの内容に基づいて、異なるページを表示することができます。
本記事では、Nuxt 3で動的ルーティングを正しく実装する方法について詳しく解説します。
動的ルーティングとは？
動的ルーティングとは、URLの一部を変数として扱い、異なるデータを表示するためのルーティング手法です。
たとえば、ブログサイトでは、各記事に対して異なるURLを持たせることができます。具体的には、/posts/1や/posts/2のように、記事のIDをURLに含めることで、特定の記事を表示することが可能です。
動的ルーティングの利点
- SEOの向上
- 各ページがユニークなURLを持つため、検索エンジンにインデックスされやすくなります。
- ユーザー体験の向上
- ユーザーが特定のコンテンツに直接アクセスできるため、利便性が向上します。
- データの再利用
- 同じテンプレートを使用して異なるデータを表示できるため、コードの重複を避けられます。
Nuxt 3での動的ルーティングの基本
Nuxt 3では、動的ルーティングを実装するために、特定のファイル名の形式を使用します。具体的には、[param].vueという形式のファイルをpagesディレクトリ内に作成します。このファイル名のparam部分が、動的に変化する部分を示します。
1. プロジェクトのセットアップ
まず、Nuxt 3プロジェクトをセットアップします。以下のコマンドを実行して新しいプロジェクトを作成します。
npx nuxi init nuxt3-dynamic-routing
cd nuxt3-dynamic-routing
npm install
npm run dev
これで、基本的なNuxt 3プロジェクトが作成され、ローカルサーバーが立ち上がります。
2. 動的ルーティングの実装
次に、動的ルーティングを実装します。pagesディレクトリ内にpostsというサブディレクトリを作成し、その中に[id].vueというファイルを作成します。
mkdir pages/posts
touch pages/posts/[id].vue
この[id].vueファイルに、以下のようなコードを記述します。
<template>
<div>
<h1>Post ID: {{ route.params.id }}</h1>
<p>ここに記事の内容が表示されます。</p>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>
このコードでは、useRouteを使用して、URLからidパラメータを取得し、表示しています。
3. 動的ルーティングのテスト
動的ルーティングが正しく実装されたかを確認するために、ブラウザで以下のURLにアクセスします。
http://localhost:3000/posts/1
このURLにアクセスすると、「Post ID: 1」と表示されるはずです。同様に、他のID（例: /posts/2）にアクセスすることで、異なるIDが表示されることを確認できます。
動的ルーティングの応用
動的ルーティングは、単にIDを表示するだけでなく、APIからデータを取得して表示することも可能です。以下に、APIからデータを取得する方法を示します。
1. APIからデータを取得する
[id].vueファイルを以下のように修正します。
<template>
<div>
<h1>Post ID: {{ post.id }}</h1>
<p>{{ post.content }}</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const post = ref({});
onMounted(async () => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${route.params.id}`);
post.value = await response.json();
});
</script>
このコードでは、onMountedフックを使用して、コンポーネントがマウントされたときにAPIからデータを取得しています。jsonplaceholder.typicode.comを使用して、ダミーデータを取得しています。
2. 動的ルーティングのテスト
再度、ブラウザで以下のURLにアクセスします。
http://localhost:3000/posts/1
このURLにアクセスすると、IDに対応する記事の内容が表示されるはずです。これにより、動的ルーティングを使用して、APIから取得したデータを表示することができました。
エラーハンドリングの実装
動的ルーティングを実装する際には、エラーハンドリングも重要です。たとえば、存在しないIDにアクセスした場合にエラーメッセージを表示するようにします。
1. エラーハンドリングの実装
以下のように、[id].vueファイルを修正します。
<template>
<div>
<h1 v-if="error">{{ error }}</h1>
<h1 v-else>Post ID: {{ post.id }}</h1>
<p v-if="!error">{{ post.content }}</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const post = ref({});
const error = ref('');
onMounted(async () => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${route.params.id}`);
if (!response.ok) {
throw new Error('Post not found');
}
post.value = await response.json();
} catch (err) {
error.value = err.message;
}
});
</script>
このコードでは、APIからのレスポンスが正常でない場合にエラーメッセージを表示するようにしています。
2. エラーハンドリングのテスト
存在しないID（例: /posts/999）にアクセスして、エラーメッセージが表示されることを確認します。
まとめ
Nuxt 3で動的ルーティングを正しく実装する方法について解説しました。動的ルーティングを使用することで、ユーザーの入力やデータに基づいて異なるページを表示することが可能になります。APIからデータを取得し、エラーハンドリングを実装することで、より実用的なアプリケーションを構築できます。
ぜひ、この記事を参考にして、あなたのプロジェクトに動的ルーティングを取り入れてみてください。
