vue-router-v4

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Vue 3 アプリケーションでルーティングを設定する
• ルート、ネストされたルート、名前付きルートを設定する
• ナビゲーションガード（グローバル、ルート単位、コンポーネント内）を実装する
• router.push()、router.replace() などを使用してプログラムによるナビゲーションを行う
• 動的なルートマッチングとルートパラメーターを処理する
• ルートのメタフィールドとルートレコードを扱う
• ルートの遅延読み込みとコード分割を実装する
• Composition API（useRouter、useRoute）で Vue Router を使用する
• 異なるヒストリーモード（ハッシュ、HTML5 ヒストリー、メモリー）を設定する
• スクロール動作とトランジションを処理する
• TypeScript で型付きルートを実装する
• Vue Router 3 から Vue Router 4 に移行する
• RouterLink コンポーネントを拡張する
• ナビゲーションの失敗とエラーを処理する
• 動的ルーティング（実行時のルートの追加／削除）を扱う

このスキルの使用方法

このスキルは、Vue Router の公式ドキュメントの構成（https://router.vuejs.org/guide/、https://router.vuejs.org/api/）に沿って整理されています。Vue Router を扱う場合は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • はじめに → examples/essentials/getting-started.md
   • 動的ルートマッチング → examples/essentials/dynamic-route-matching.md
   • ルートマッチングの構文 → examples/essentials/routes-matching-syntax.md
   • 名前付きルート → examples/essentials/named-routes.md
   • ネストされたルート → examples/essentials/nested-routes.md
   • プログラムによるナビゲーション → examples/essentials/programmatic-navigation.md
   • 名前付きビュー → examples/essentials/named-views.md
   • リダイレクトとエイリアス → examples/essentials/redirect-alias.md
   • ルートコンポーネントへの props の受け渡し → examples/essentials/passing-props.md
   • 異なるヒストリーモード → examples/essentials/different-history-modes.md
   • ナビゲーションガード → examples/advanced/navigation-guards.md
   • ルートのメタフィールド → examples/advanced/route-meta-fields.md
   • データ取得 → examples/advanced/data-fetching.md
   • Composition API → examples/advanced/composition-api.md
   • RouterView スロット → examples/advanced/routerview-slot.md
   • トランジション → examples/advanced/transitions.md
   • スクロール動作 → examples/advanced/scroll-behavior.md
   • ルートの遅延読み込み → examples/advanced/lazy-loading-routes.md
   • 型付きルート → examples/advanced/typed-routes.md
   • RouterLink の拡張 → examples/advanced/extending-router-link.md
   • ナビゲーションの失敗 → examples/advanced/navigation-failures.md
   • 動的ルーティング → examples/advanced/dynamic-routing.md

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   基本（Essentials） - examples/essentials/：

   • examples/essentials/getting-started.md - ルーターの作成と基本設定
   • examples/essentials/dynamic-route-matching.md - パラメーターを使用した動的ルートマッチング
   • examples/essentials/routes-matching-syntax.md - ルートマッチングの構文とパターン
   • examples/essentials/named-routes.md - 名前付きルートとナビゲーション
   • examples/essentials/nested-routes.md - ネストされたルートと RouterView
   • examples/essentials/programmatic-navigation.md - ルーターメソッドを使用したプログラムによるナビゲーション
   • examples/essentials/named-views.md - 名前付きビューと複数の RouterView
   • examples/essentials/redirect-alias.md - リダイレクトとエイリアス
   • examples/essentials/passing-props.md - ルートコンポーネントへの props の受け渡し
   • examples/essentials/different-history-modes.md - ハッシュ、HTML5 ヒストリー、メモリーモード Advanced (上級) - examples/advanced/:
   • examples/advanced/navigation-guards.md - グローバルガード、ルートごとのガード、コンポーネント内ガード
   • examples/advanced/route-meta-fields.md - ルートメタフィールドとカスタムデータ
   • examples/advanced/data-fetching.md - データフェッチ戦略
   • examples/advanced/composition-api.md - Composition API で useRouter() と useRoute() を使用する
   • examples/advanced/routerview-slot.md - RouterView スロットプロパティ
   • examples/advanced/transitions.md - ルートのトランジションとアニメーション
   • examples/advanced/scroll-behavior.md - スクロール動作の設定
   • examples/advanced/lazy-loading-routes.md - ルートの遅延読み込みとコード分割
   • examples/advanced/typed-routes.md - TypeScript の型付きルート
   • examples/advanced/extending-router-link.md - RouterLink コンポーネントの拡張
   • examples/advanced/navigation-failures.md - ナビゲーション失敗の処理
   • examples/advanced/dynamic-routing.md - ルートの動的な追加と削除

3. そのサンプルファイル内の具体的な手順に従って、構文、構造、ベストプラクティスを確認してください

   重要な注意事項:

   • すべてのサンプルは Vue Router 4 API に準拠しています
   • サンプルには、該当する場合は JavaScript 版と TypeScript 版の両方が含まれます
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています
   • ベストプラクティスと一般的なパターンについては、必ずサンプルファイルを確認してください

4. 必要に応じて api/ ディレクトリ内の API ドキュメントを参照してください:

   • api/router.md - Router インスタンス API (createRouter、addRoute、removeRoute など)
   • api/route-records.md - ルートレコードの型とプロパティ
   • api/useRouter-useRoute.md - Composition API 関数 (useRouter、useRoute)
   • api/navigation-helpers.md - ナビゲーションヘルパー関数
   • api/router-link-router-view-components.md - RouterLink コンポーネントと RouterView コンポーネント
   • api/history-modes-api.md - 履歴モード API
   • api/error-and-failure-types.md - エラーと失敗の型

5. templates/ ディレクトリのテンプレートを使用してください:

   • templates/router-setup.md - ルーターセットアップのテンプレート
   • templates/route-config.md - ルート設定のテンプレート

サンプルとテンプレート

このスキルには、Vue Router 公式ドキュメントの構成 (https://router.vuejs.org/guide/、https://router.vuejs.org/api/) に対応するように整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあり、トピックごとに整理されています:

Essentials (基礎) - examples/essentials/

• examples/essentials/getting-started.md - ルーターの作成、Vue Router のインストール、基本的なセットアップ
• examples/essentials/dynamic-route-matching.md - params と query を使用した動的ルートマッチング
• examples/essentials/routes-matching-syntax.md - ルートマッチング構文、キャッチオールルート、正規表現
• examples/essentials/named-routes.md - 名前付きルートと名前によるナビゲーション
• examples/essentials/nested-routes.md - ネストされたルートとネストされた RouterView
• examples/essentials/programmatic-navigation.md - router.push()、router.replace()、router.go() によるプログラム的ナビゲーション
• examples/essentials/named-views.md - 名前付きビューと複数の RouterView コンポーネント
• examples/essentials/redirect-alias.md - リダイレクトとエイリアスの設定
• examples/essentials/passing-props.md - ルートコンポーネントへの props の受け渡し
• examples/essentials/different-history-modes.md - ハッシュモード、HTML5 履歴モード、メモリモード

高度な使い方 - examples/advanced/

• examples/advanced/navigation-guards.md - グローバルガード、ルートごとのガード、コンポーネント内ガード
• examples/advanced/route-meta-fields.md - ルートのメタフィールドとガード内でのメタ情報へのアクセス
• examples/advanced/data-fetching.md - データ取得戦略（ナビゲーション前、ナビゲーション後）
• examples/advanced/composition-api.md - Composition API での useRouter() と useRoute() の使用
• examples/advanced/routerview-slot.md - RouterView のスロットプロパティとカスタムレンダリング
• examples/advanced/transitions.md - ルートのトランジションとアニメーション
• examples/advanced/scroll-behavior.md - スクロール動作の設定
• examples/advanced/lazy-loading-routes.md - ルートの遅延読み込みとコード分割
• examples/advanced/typed-routes.md - TypeScript の型付きルートと型安全性
• examples/advanced/extending-router-link.md - RouterLink コンポーネントの拡張
• examples/advanced/navigation-failures.md - ナビゲーションの失敗とエラーへの対処
• examples/advanced/dynamic-routing.md - 実行時のルートの動的な追加と削除

テンプレートディレクトリ（templates/）

• templates/router-setup.md - さまざまなシナリオ向けのルーター設定テンプレート
• templates/route-config.md - ルート設定テンプレート

例の使用方法：

• ユーザーのリクエストからトピックを特定します
• 該当するディレクトリから適切な例のファイルを読み込みます
• そのファイルの指示、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートの使用方法：

• ルーター設定テンプレートについては、templates/router-setup.md を参照します
• ルート設定テンプレートには templates/route-config.md を使用します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式 Vue Router API ドキュメントの構成に沿って整理されています。

Router API（api/router.md）

• createRouter() - ルーターインスタンスの作成
• ルーターインスタンスのメソッド：addRoute()、removeRoute()、hasRoute()、getRoutes()、push()、replace()、go()、back()、forward()
• ルーターインスタンスのプロパティ：currentRoute、options

Route Records API（api/route-records.md）

• ルートレコードの型とプロパティ
• ルート設定オプション

Composition API（api/useRouter-useRoute.md）

• useRouter() - setup 内でルーターインスタンスにアクセス
• useRoute() - setup 内で現在のルートにアクセス

ナビゲーションヘルパー（api/navigation-helpers.md）

• ナビゲーションヘルパー関数とユーティリティ

コンポーネント API（api/router-link-router-view-components.md）

• RouterLink コンポーネントのプロパティと使用方法
• RouterView コンポーネントのプロパティと使用方法

History Modes API（api/history-modes-api.md）

• createWebHistory() - HTML5 履歴モード
• createWebHashHistory() - ハッシュモード
• createMemoryHistory() - メモリモード

エラーと失敗の型（api/error-and-failure-types.md）

• ナビゲーション失敗の型
• エラー処理

API リファレンスの使用方法：

1. 確認したい API を特定します
2. api/ ディレクトリから該当する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、例を確認します
4. 詳細な使用パターンについては、リンク先の例のファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連する例のファイルへのリンクが含まれています

ベストプラクティス

1. 名前付きルートを使用する：保守性とリファクタリングのしやすさを高めるため、名前付きルートを使用します
2. ルートを遅延読み込みする：コード分割を有効にするため、ルートコンポーネントには動的インポートを使用します
3. 型安全性：型安全性を高めるため、型付きルートで TypeScript を使用します
4. ナビゲーションガード：ナビゲーションガードを適切に使用します（グローバル、ルートごと、コンポーネント内）
5. ルートメタ：カスタムデータや権限には、ルートのメタフィールドを使用します
6. 履歴モード：デプロイ環境に基づいて適切な履歴モードを選択します
7. スクロール動作：UX を向上させるため、スクロール動作を設定します
8. エラー処理：ナビゲーションの失敗に適切に対処します

リソース

• 公式ガイド: https://router.vuejs.org/guide/
• API リファレンス: https://router.vuejs.org/api/
• 移行ガイド: https://router.vuejs.org/guide/migration/
• GitHub リポジトリ: https://github.com/vuejs/router

キーワード

Vue Router, router, ルーティング, ナビゲーション, ルート, ルート, ネストされたルート, 名前付きルート, 動的ルート, ルートパラメーター, ルートクエリー, ナビゲーションガード, ルートメタ, プログラムによるナビゲーション, RouterLink, RouterView, useRouter, useRoute, ヒストリーモード, ハッシュモード, HTML5 ヒストリー, 遅延読み込み, コード分割, 型付きルート, TypeScript, ルーティング, ナビゲーション, ルートガード, ネストされたルート, 名前付きルート, 動的ルート, プログラムによるナビゲーション, 遅延読み込み, 型付きルート