Vue Router ルーティングの設定：完全ガイド

2025-07-31

はじめに

Vue.jsを学んでいる開発者にとって、Vue Routerはシングルページアプリケーション(SPA)を構築する上で欠かせないツールです。この記事では、Vue Routerの基本的な設定から高度な使い方まで、詳細な解説を行います。Vue RouterはVue.jsの公式ルーティングライブラリで、SPA内でのページ遷移を管理します。従来のWebアプリケーションのようなページ全体の再読み込みではなく、コンポーネントの動的な切り替えを可能にします。

環境設定

まずはVue Routerをプロジェクトにインストールしましょう。

# Vue CLIを使用している場合
vue add router

# またはnpmで直接インストール
npm install vue-router@4

既存のプロジェクトにVue Routerを追加する場合、src/router/index.jsファイルを作成します。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue') // 遅延読み込み
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

基本的なルーティング設定

ルートの定義

ルートはroutes配列にオブジェクトとして定義します。各ルートには以下のプロパティを設定できます。

  • path: URLパス
  • name: ルート名（オプションだが推奨）
  • component: 表示するコンポーネント
  • components: 名前付きビュー用（複数コンポーネント）
  • redirect: リダイレクト先
  • alias: エイリアス
  • props: コンポーネントにpropsとして渡す値
  • meta: ルートメタフィールド
  • beforeEnter: ルート専用ガード

動的ルーティング

コロン:を使用して動的なセグメントを定義できます。

{
  path: '/user/:id',
  name: 'User',
  component: UserProfile
}

コンポーネント内では$route.params.idでアクセス可能です。

ネストされたルート

子ルートを定義することで、UIのネストを表現できます。

{
  path: '/dashboard',
  component: Dashboard,
  children: [
    {
      path: '',
      component: DashboardDefault
    },
    {
      path: 'settings',
      component: DashboardSettings
    }
  ]
}

ルーターリンクとナビゲーション

Vue Routerでは<router-link>コンポーネントを使用してナビゲーションを行います。

<router-link to="/">Home</router-link>
<router-link :to="{ name: 'About' }">About</router-link>
<router-link :to="{ path: '/user/123' }">User</router-link>

プログラムによるナビゲーションにはrouterインスタンスのメソッドを使用します。

// パスで移動
this.$router.push('/home')

// 名前付きルートで移動
this.$router.push({ name: 'User', params: { id: '123' } })

// 置換（履歴に残らない）
this.$router.replace('/login')

// 履歴を進む/戻る
this.$router.go(1)
this.$router.go(-1)

ルートガード

ナビゲーションを制御するためのガード機能があります。

グローバルガード

router.beforeEach((to, from, next) => {
  // ログインが必要なページかどうかをチェック
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

ルート単位のガード

{
  path: '/admin',
  component: AdminPanel,
  beforeEnter: (to, from, next) => {
    if (!isAdmin()) {
      next('/forbidden')
    } else {
      next()
    }
  }
}

コンポーネント内ガード

export default {
  beforeRouteEnter(to, from, next) {
    // コンポーネントが作成される前に呼ばれる
    next(vm => {
      // `vm`でコンポーネントインスタンスにアクセス
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 同じコンポーネントでルートが変更された時
    next()
  },
  beforeRouteLeave(to, from, next) {
    // ナビゲーション離れる時
    if (unsavedChanges) {
      if (confirm('変更が保存されていません。離れますか？')) {
        next()
      }
    } else {
      next()
    }
  }
}

高度なルーティングテクニック

遅延読み込み

大規模アプリケーションでは、ルートコンポーネントを遅延読み込みすることで初期ロード時間を短縮できます。

{
  path: '/settings',
  component: () => import('../views/UserSettings.vue')
}

スクロール動作

ナビゲーション後のスクロール位置を制御できます。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    } else {
      return { top: 0 }
    }
  }
})

ルートメタフィールド

ルートに任意の情報を付加できます。

{
  path: '/admin',
  meta: { requiresAuth: true, adminOnly: true }
}

トランジション効果

ルート間の遷移にトランジション効果を追加できます。

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

CSSでトランジションを定義:

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

エラーハンドリング

存在しないルートへのアクセスを処理します。

{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: NotFound
}

ベストプラクティス

  1. ルート名を使用する: パスよりも名前でルートを参照すると、パス変更に強くなります
  2. 遅延読み込みを活用: 初期バンドルサイズを小さく保ちます
  3. ルートガードで認証を管理: 保護されたルートへのアクセスを制御します
  4. メタフィールドを活用: ルートに追加情報を付加します
  5. 動的インポートを使用: コード分割でパフォーマンス向上

まとめ

Vue RouterはVue.jsアプリケーションのナビゲーションを管理する強力なツールです。基本的なルーティングから高度な機能まで、適切に活用することでユーザー体験の良いSPAを構築できます。このガイドで紹介したテクニックを活用して、より洗練されたVue.jsアプリケーション開発を目指しましょう。

さらに学ぶために

Vue Routerの習得はVue.js開発者としての重要なステップです。実際に手を動かしながら、これらの概念を自分のものにしていきましょう。

同じカテゴリーの記事