概要

Vue.jsで動的ルーティングを実装する方法について解説します。動的ルーティングは、ルーティング情報を動的に生成してページを描画する機能であり、動的なコンテンツを柔軟に表示することが可能です。この機能は、コンテンツが多様であり、URLパラメータに基づいてページを表示する必要がある場合に特に有用です。

なぜこの技術/機能が必要なのか

動的ルーティングを実装することで、特定のパラメータに基づいて異なるコンテンツを表示することができます。これにより、ユーザーエクスペリエンスを向上させることが可能です。

解決する問題やユースケース

動的ルーティングを活用することで、商品ページやユーザープロフィールなど、多岐にわたるコンテンツを効率的に管理・表示することができます。

前提知識と環境要件

Vue.jsの基本知識
Vue Routerの基本的な使い方

基本実装


<template>
  <div>
    <!-- 動的ルーティングで表示するコンテンツ -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const data = ref()

onMounted(() => {
  /* ライフサイクルフック */
})
</script>

<style scoped>
/* コンポーネント固有のスタイル */
</style>

Composition API活用


import { ref, computed } from 'vue'

export function useExample() {
  const state = ref()
  
  const computedValue = computed(() => {
    /* 算出プロパティ */
  })
  
  return {
    state,
    computedValue
  }
}

テンプレート構文


<template>
  <div v-if="condition">
    <component :is="dynamicComponent" />
  </div>
</template>

状態管理


import { defineStore } from 'pinia'

export const useExampleStore = defineStore('example', () => {
  // ストアの実装
})

実践例

動的ルーティングを使用して、カテゴリーページから商品詳細ページに遷移するサンプルを作成します。


<!-- カテゴリーページ -->
<router-link :to="{ name: 'product', params: { id: 123 }}">商品A</router-link>

<!-- 商品詳細ページ -->
<template>
  <div>
    商品ID: {{ $route.params.id }} の詳細
  </div>
</template>

Navigation

Vue.jsで動的ルーティングを実装する方法

概要