【Vue.js】ルーティングによる画面切り替え｜Vue Routerの基本構成と実装手順

Vue.jsでは、ページ全体を再読み込みせずに画面を切り替える「シングルページアプリケーション（SPA）」を構築できます。その中心的な役割を担うのが Vue Router です。この記事では、Vue Routerを使ったルーティングの基本構成と、複数ページの切り替えを実現する実装手順を解説します。

Vue Routerとは？

Vue Routerは、Vue.js公式のルーティングライブラリで、SPA内でURLに応じたコンポーネントの切り替えを実現します。ユーザーが異なるURLにアクセスしたときに、該当するコンポーネントを表示させるための仕組みです。

Vue Routerのインストール

Vue CLIで作成したプロジェクトにVue Routerを追加するには、以下のコマンドを使用します。

npm install vue-router

Vue 3 を使用している場合は、バージョン4系のVue Routerが適用されます。

ルーターの基本設定

まず、ルートごとに表示するコンポーネントを定義し、ルーターインスタンスを作成します。

// src/router/index.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

ルーターをVueアプリに組み込む

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

ルート切り替えのビュー表示

App.vueなどのメインテンプレートには<router-view>を配置することで、URLに応じてコンポーネントが差し込まれます。

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <router-view />
  </div>
</template>

ルーティングの便利な機能

• ネストされたルート：子ページを持つ構造
• 動的ルート：URLパラメータによる切り替え
• ナビゲーションガード：アクセス制御やログインチェック
• 遅延読み込み：ルート単位でコンポーネントを分割

例えば、パラメータ付きルートの定義と使用方法は以下の通りです。

// ルート定義
{ path: '/user/:id', component: User }

// コンポーネント内でアクセス
this.$route.params.id

まとめ

Vue Routerを使えば、Vue.jsで柔軟なページ遷移を構築することができます。基本的な設定さえ押さえれば、複数ページ構成のSPAも手軽に実現可能です。今後は、ナビゲーションガードや遅延読み込みなどの高度な機能も活用し、より洗練されたユーザー体験を提供していきましょう。