Vue 3でのルーティング、Vue Routerの基本的な使い方まとめ

Vue.js で SPA を作るなら欠かせないのが Vue Router。この記事では、Vue 3 + Composition API で Vue Router を使って簡単なページ遷移を実装する方法をまとめました。

---

🎯 この記事でわかること

• Vue Router のインストール
• ページコンポーネントの作成
• ルーティング設定
• <router-link> と <router-view> の使い方
• 動的ルーティング（パラメータ付き）の使い方

---

🔧 開発環境

• Vue 3
• Vue Router 4
• Vite を使ったプロジェクト

---

1️⃣ インストール

npm install vue-router

Vue Router をプロジェクトに追加するためのコマンドです。

---

2️⃣ ページコンポーネントを用意

views/Home.vue

<template>
  <h1>Home Page</h1>
</template>

views/About.vue

<template>
  <h1>About Page</h1>
</template>

各ページの表示内容をコンポーネントとして定義します。

---

3️⃣ ルーティングの設定ファイルを作成

src/router/index.js を作成します。

import { createRouter, createWebHistory } from 'vue-router' // Vue Router の関数をインポート
import Home from '../views/Home.vue' // Homeページのコンポーネントをインポート
import About from '../views/About.vue' // Aboutページのコンポーネントをインポート

const routes = [
  { path: '/', component: Home }, // '/' にアクセスしたら Home を表示
  { path: '/about', component: About }, // '/about' にアクセスしたら About を表示
]

const router = createRouter({
  history: createWebHistory(), // HTML5ヒストリーモードを使用（URLにハッシュ「#」を含めず、通常のパスのように見せるルーティング方式）
  routes,
})

export default router // 他のファイルで使えるようにエクスポート

---

4️⃣ main.js にルーターを登録

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 作成した router をインポート

const app = createApp(App)
app.use(router) // アプリに router を適用
app.mount('#app') // #app にマウント

---

5️⃣ ルーターリンクとルーター表示エリア

<!-- App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link><br>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

• <router-link> は to 属性で遷移先を指定できるリンクです。
• <router-view> は、現在のルートに応じたコンポーネントを表示する場所です。

---

6️⃣ 動的ルーティング（オプション）

// ルーティングに追加
{ path: '/user/:id', component: User }

/user/123 のようなパスにマッチします。

<!-- views/User.vue -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute() // 現在のルート情報を取得
const userId = route.params.id // URL のパラメータ（id）を取得
</script>

<template>
  <div>User ID: {{ userId }}</div>
</template>

useRoute() を使うことで、ルートに含まれる動的なパラメータを取得できます。

---

✅ まとめ

機能	方法
ページ表示	<router-view />
リンク作成	<router-link to="/about" />
動的ルート	/user/:id
ルート取得	useRoute().params
ページ遷移（コード）	useRouter().push('/about')

---

🧭 実装の手順まとめ

1. vue-router をインストール
2. 各ページ用のコンポーネントを views/ に作成
3. router/index.js を作成してルートを定義
4. main.js でアプリにルーターを登録
5. <router-link> と <router-view> を使って画面遷移を設定
6. 必要に応じて動的ルーティングやプログラム的遷移を追加

---

📘 Tips

• router-view はページを差し込む場所
• <router-link> は HTML の <a> タグの代わり
• useRoute() で現在のルート情報にアクセス
• useRouter() でルーター操作（遷移など）可能