vue-router

Vue Router

このスキルは Vue Router v5.0.1 に基づいており、2026-01-31 に生成されました。

Vue Router は Vue.js 公式のルーターです。Vue.js のコアと深く統合されており、Vue.js でシングルページアプリケーションを簡単に構築できます。主な機能には、ネストされたルートマッピング、動的ルーティング、モジュール式のコンポーネントベースのルーター設定、ルートパラメーター、クエリ、ワイルドカード、ビュー遷移エフェクト、きめ細かなナビゲーション制御、自動でアクティブな CSS クラスが適用されるリンク、HTML5 ヒストリーモードまたはハッシュモード、カスタマイズ可能なスクロール動作、URL の適切なエンコードなどがあります。

コアリファレンス

トピック	説明	リファレンス
ルーターのセットアップ	ルーターインスタンスの作成、プラグインの登録、ルーター／ルートへのアクセス	core-router-setup
ナビゲーション	push、replace、go メソッドによるプログラムからのナビゲーション	core-navigation
RouterView と RouterLink	ルートの描画とナビゲーションリンクの作成に使用するコンポーネント	core-router-view-link

基本事項

ルート設定

トピック	説明	リファレンス
動的マッチング	params を使用した動的ルートセグメント、route.params へのアクセス	essentials-dynamic-matching
ネストされたルート	children オプションを使用したネストされたルートの設定	essentials-nested-routes
名前付きルート	URL をハードコードせずにナビゲーションできる名前付きルート	essentials-named-routes
名前付きビュー	複雑なレイアウト向けの複数の RouterView コンポーネント	essentials-named-views
ヒストリーモード	HTML5 ヒストリー、ハッシュモード、メモリモード、サーバー設定	essentials-history-mode
ルートマッチング構文	カスタム正規表現、繰り返し可能なパラメーター、省略可能なパラメーター	essentials-route-matching-syntax
アクティブなリンク	アクティブリンクの CSS クラス、router-link-active と exact-active の違い	essentials-active-links
Props の受け渡し	ルートパラメーターをコンポーネントの Props として渡す	essentials-passing-props
リダイレクトとエイリアス	URL マッピングのためのルートリダイレクトとエイリアス	essentials-redirect-alias

高度なトピック

ナビゲーションとガード

トピック	説明	リファレンス
ナビゲーションガード	グローバルガード、ルート単位のガード、コンポーネント内ガード	advanced-navigation-guards
ナビゲーションの失敗	中断／キャンセル／重複したナビゲーションの検出	advanced-navigation-failures

Composition と TypeScript

トピック	説明	リファレンス
Composition API	useRouter、useRoute、ナビゲーションガード、useLink	advanced-composition-api
型付きルート	オートコンプリートと型安全性を実現する TypeScript の型付きルート	advanced-typed-routes

高度な機能

トピック	説明	リファレンス
トランジション	RouterView スロットを使用したルートのトランジション	advanced-transitions
スクロール動作	ナビゲーション時のカスタムスクロール動作	advanced-scroll-behavior
メタフィールド	カスタムデータ用のルートメタフィールド	advanced-meta
遅延読み込み	動的インポートを使用したルートコンポーネントの遅延読み込み	advanced-lazy-loading
動的ルーティング	実行時のルートの追加と削除	advanced-dynamic-routing
RouterView スロット	カスタムレンダリング用の高度な RouterView スロット API	advanced-router-view-slot