Vue 3 の Vue Router を初心者向けに解説！【SPA開発の基礎】

はじめに

Vue.js で複数ページを管理し、スムーズに遷移できる仕組みが Vue Router です。
Vue Router を使うことで、シングルページアプリケーション（SPA） を簡単に構築できます。

本記事では、Vue Router の基本概念・導入・ページ遷移の方法・実践例 まで、初心者向けにわかりやすく解説します！

Vue Router とは？

ルーティングの基本概念

通常の Web サイト では、ユーザーがページをクリックすると 新しいページが読み込まれ ます。
しかし、Vue Router を使うと ページの一部だけを切り替える ことができ、スムーズな遷移を実現できます。

Vue.js における Vue Router の役割

• 異なるページ（コンポーネント）を管理し、遷移を簡単にする
• ページ遷移時のリロードが不要
• 動的なコンテンツ切り替えが可能

Vue Router を使うメリット

シングルページアプリケーション（SPA）とは？

従来のマルチページアプリケーション（MPA）との違い

SPA の仕組み

• ページ遷移時に画面全体をリロードしない
• JavaScript（Vue Router）が URL を管理し、適切なコンポーネントを表示
• パフォーマンスが向上し、ユーザー体験が向上

Vue Router の基本的な使い方（Vue 3 向け）

Vue Router のインストール

Vue Router は Vue.js とは別にインストールが必要です。

npm install vue-router@4

@4 は Vue 3 向けの Vue Router のバージョン

ルーターの作成 (router.js)

Vue Router では createRouter() を使って ルーターを作成 します。

router.js（ルートの設定）

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

routes 配列の役割

ルーターを main.js に登録

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // ルーターをインポート

const app = createApp(App);
app.use(router); // ルーターを使用
app.mount("#app");

これで Vue アプリ全体でルーターが使えるように なります！

コンテンツの切り替え (router-view)

Vue Router では、ページの切り替えを <router-view /> で実装できます。

App.vue

<template>
  <div>
    <h1>Vue Router の基本</h1>
    <router-link to="/">ホーム</router-link>
    <router-link to="/about">詳細</router-link>
    
    <router-view></router-view>
  </div>
</template>

router-view の部分が クリックされたリンクに応じてコンテンツが切り替わる！

ページ遷移の実装

ナビゲーション (router-link)

router-link を使うと、ページ遷移が可能になります。

router-link を使ったナビゲーション

<template>
  <nav>
    <router-link to="/">ホーム</router-link>
    <router-link to="/about">詳細</router-link>
  </nav>
</template>

✅ <a href=""> の代わりに router-link を使うと、ページのリロードなしで遷移できる！

動的ルート（/user/:id のようなパラメータ付きルート）

ユーザーごとに異なるページを表示する場合、動的ルートを使います。

router.js

const routes = [
  { path: "/user/:id", component: User }
];

User.vue（動的ルートパラメータを取得）

<template>
  <p>ユーザー ID: {{ userId }}</p>
</template>

<script setup>
import { useRoute } from "vue-router";

const route = useRoute();
const userId = route.params.id;
</script>

useRoute().params.id を使って URL から ID を取得できる！

プログラムによるルート遷移

ページ遷移を JavaScript で制御 する場合は router.push() を使います。

ボタンクリックで遷移

<template>
  <button @click="goToAbout">詳細へ移動</button>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const goToAbout = () => {
  router.push("/about");
};
</script>

router.push("/about") で 手動でページ遷移 できる！

実践例: Vue Router を使った 2 ページ構成のアプリ

router.js を作成

Vue Router の設定ファイルを作成し、ページごとのルートを定義します。

router.js

import { createRouter, createWebHistory } from "vue-router";
import HomePage from "./views/HomePage.vue";
import AboutPage from "./views/AboutPage.vue";

const routes = [
  { path: "/", component: HomePage },
  { path: "/about", component: AboutPage }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

ここでのポイント

1. Vue Router の createRouter() でルーターを作成
2. createWebHistory() を使ってブラウザの履歴モードを有効化
3. routes 配列で URL (path) とコンポーネント (component) を紐づけ

これで / にアクセスすると Home.vue、/about にアクセスすると About.vue が表示されるようになります。

main.js に Vue Router を登録

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // ルーターをインポート

const app = createApp(App);
app.use(router); // ルーターを適用
app.mount("#app");

ここでのポイント

• app.use(router) を追加し、Vue Router を Vue アプリ全体で使えるようにする
• router は router.js で定義したものを import する

これでアプリ全体に Vue Router が適用される！

App.vue に router-link と router-view を設定

App.vue

<template>
  <div>
    <h1>Vue Router の基本</h1>
    <nav>
      <router-link to="/">ホーム</router-link>
      <router-link to="/about">詳細</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<style>
nav {
  margin-bottom: 20px;
}
nav a {
  margin-right: 15px;
  text-decoration: none;
  color: blue;
}
nav a.router-link-active {
  font-weight: bold;
  color: red;
}
</style>

ここでのポイント

1. router-link を使うと、ページ遷移ができる
   • to="/" → Home.vue に遷移
   • to="/about" → About.vue に遷移
2. router-view でコンテンツを切り替える
   • router-view の部分に、現在のルート（URL）に対応したコンポーネントが表示される。
3. ナビゲーションのスタイル
   • 現在のページ（アクティブな router-link）は赤色にする

これで router-link をクリックすると router-view 内のコンテンツが切り替わる！

HomePage.vue と AboutPage.vue を作成

次に、ページごとのコンポーネントを作成します。

views/HomePage.vue

<template>
  <h2>ホームページ</h2>
</template>

views/AboutPage.vue

<template>
  <h2>詳細ページ</h2>
</template>

動作確認

ローカルサーバを起動し、アクセスすると下記画面が出てきます。
ナビゲーションをクリックし、画面とURLが切り替わったら成功です。

まとめ

Vue Router を使うと、Vue アプリのページ遷移が スムーズで管理しやすく なります！
ぜひ実際にコードを書いて、Vue Router の使い方をマスターしましょう！

またVue Router にはさらに ナビゲーションガード（ログイン認証など）や リダイレクト などの便利な機能があります。不明点があれば公式サイトを確認しましょう
Vue Router 公式ドキュメント