Vue.jsアプリケーションにおけるルーティングは、ユーザーが異なるビュー間をシームレスに移動するために不可欠な機能です。公式のルーティングライブラリであるVue Routerは、この機能を実現するための基盤を提供します。Vue 2からVue 3へのフレームワークの進化に伴い、Vue Routerの基本的な設定方法にもいくつかの変更が加えられました。この記事では、Vue 2とVue 3それぞれの環境下でのVue Routerの主要な設定方法を比較し、その具体的な相違点について掘り下げていきます。

Vue 2におけるルーティング設定

Vue 2環境では、まずVue RouterをVueプラグインとしてグローバルに登録し、その後にnew Router()コンストラクタを用いてルーターインスタンスを生成するのが一般的な流れでした。以下に、Vue 2アプリケーションにおける典型的なルーター設定の例を示します。

// Vue本体とVue Routerモジュールをインポート
import Vue from 'vue';
import VueRouter from 'vue-router';

// Vue RouterをVueプラグインとして有効化
Vue.use(VueRouter);

// ルーターインスタンスを生成し、設定オプションを渡す
const appRouter = new VueRouter({
  // ルーティングの履歴モードを設定（'hash'または'history'）
  // 'hash'モードはURLにハッシュ記号（#）を含みます
  mode: 'hash', 
  
  // アプリケーションのルート定義の配列
  routes: [
    {
      // このルートの一意な名前
      name: 'dashboard',
      // このルートにアクセスするためのパス
      path: '/dashboard',
      // このルートで表示されるコンポーネント
      // () => import(...)はコード分割による遅延ロード（Lazy Loading）の例
      component: () => import('@/views/DashboardPage.vue'),
      // このルートの子ルート（ネストされたルート）
      children: [
        {
          name: 'profile',
          // 親ルートからの相対パス
          path: 'profile', 
          component: () => import('@/views/UserProfile.vue'),
        },
      ],
    },
    // どのルートにもマッチしない場合のフォールバック（リダイレクト）
    {
      // 全ての未定義パスをキャッチ
      path: '*',
      // '/dashboard'パスにリダイレクト
      redirect: '/dashboard', 
    },
  ],
});

// 設定されたルーターインスタンスをエクスポート
export default appRouter;

この設定では、Vue.use(VueRouter)によってルーティング機能がアプリケーション全体で利用可能になります。modeプロパティは、ハッシュモード（デフォルト）またはHTML5履歴モードのどちらを使用するかを定義します。routes配列内では、path、name、そして対応するcomponent（通常は遅延ロード形式で定義）を使って各ルートが構成されます。childrenプロパティを使用すると、ルートを階層的にネストさせることができます。また、path: '*'は、定義されたどのルートにもマッチしないURLに対する「キャッチオール」ルートとして機能し、指定されたパスへリダイレクトします。

Vue 3におけるルーティング設定

Vue 3では、Vue Routerの初期化方法が関数型のアプローチへと変更されました。Vueのグローバルインスタンスへの依存を減らし、よりモジュール的で柔軟な設定を可能にするため、createRouter関数と履歴モードを定義する専用の関数が導入されています。以下に、Vue 3でのルーター設定の例を示します。

// Vue Routerから必要な関数群をインポート
// createRouter: ルーターインスタンスを生成
// createWebHashHistory: ハッシュモードの履歴管理関数
// createWebHistory: HTML5履歴モードの履歴管理関数
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

// ルーターインスタンスの生成と設定
const appRouter = createRouter({
  // 履歴モードを指定。createWebHashHistory()はハッシュモード、
  // createWebHistory()はHTML5履歴モードを有効にします。
  history: createWebHashHistory(), // または createWebHistory() を使用

  // アプリケーションのルート定義の配列
  routes: [
    {
      name: 'dashboard',
      path: '/dashboard',
      component: () => import('@/views/DashboardPage.vue'),
      children: [
        {
          name: 'profile',
          path: 'profile',
          component: () => import('@/views/UserProfile.vue'),
        },
      ],
    },
    // どのルートにもマッチしない場合のフォールバック（リダイレクト）
    // Vue 3では正規表現ベースのパス定義が必要
    {
      // ':catchAll(.*)'は任意のパスをキャッチする正規表現
      path: '/:catchAll(.*)', 
      redirect: '/dashboard',
    },
  ],
});

// 設定されたルーターインスタンスをエクスポート
export default appRouter;

Vue 3では、createRouter関数を呼び出すことでルーターインスタンスを生成します。履歴モードは、historyプロパティに対してcreateWebHashHistory()またはcreateWebHistory()のいずれかの関数を渡すことで設定されます。ルート定義の構造自体（routes配列、name、path、component、children）はVue 2と大きく変わりません。しかし、どのルートにもマッチしないパスを捕捉するためのワイルドカードパスは、path: '/:catchAll(.*)'という正規表現ベースの記述に変更されています。

Vue 2とVue 3のルーター設定における主な相違点

これまでのコード例を通じて、Vue 2とVue 3のVue Router設定における主要な変更点を以下にまとめます。

• ルーターの初期化とインポート方法:
  • Vue 2: import VueRouter from 'vue-router'; Vue.use(VueRouter); new VueRouter() の形式で、グローバルなVueインスタンスにプラグインとして追加し、コンストラクタを呼び出していました。
  • Vue 3: import { createRouter } from 'vue-router'; createRouter() の形式で、createRouter関数を直接インポートして実行します。これにより、Vueのグローバル状態への依存が減り、より独立した設定が可能になりました。
• 履歴モードの設定方法:
  • Vue 2: ルーターインスタンスのオプションとして mode: 'hash' または mode: 'history' の文字列を指定していました。
  • Vue 3: history プロパティに createWebHashHistory() または createWebHistory() のいずれかの関数を渡して設定します。これにより、コードの意図がより明確になり、型安全性も向上します。
• ワイルドカード（404）ルートの定義:
  • Vue 2: どのルートにもマッチしないパスを捕捉するために path: '*' というシンプルなワイルドカードを使用していました。
  • Vue 3: 正規表現ベースのパス定義が必要となり、path: '/:catchAll(.*)' のように記述します。これは、より強力で柔軟なパターンマッチングを可能にするための変更です。

これらの変更点を除けば、個々のルートオブジェクトの構造（name、path、component、childrenなどのプロパティ）はVue 2とVue 3の間でほぼ一貫しており、基本的なルーティング機能の利用方法自体は大きく変わりません。