1. Vue Routerの概要
Vue Routerは、Vue.js公式のルーティング管理ライブラリです。Vue.jsのコアと深く統合されており、シングルページアプリケーション（SPA）の構築を容易にします。主な機能には以下のものがあります：
- ネストされたルート/ビュー階層
- モジュール化されたコンポーネントベースのルート設定
- ルートパラメータ、クエリ、ワイルドカード
- Vue.jsトランジションシステムに基づくビュー遷移効果
- 細やかなナビゲーション制御
- 自動アクティブ化されるCSSクラスを持つリンク
- HTML5履歴モードまたはハッシュモード（IE9で自動フォールバック）
- カスタムスクロール動作
フロントエンドルーティングとバックエンドルーティング
バックエンドルーティング：従来のWebサイトでは、すべてのリンクがURLアドレスであり、各URLはサーバー上の対応リソースにマッピングされます。
フロントエンドルーティング：シングルページアプリケーションでは、主にURLのハッシュ（#）を使用して異なるページ間を切り替えます。ハッシュはHTTPリクエストに含まれないため、SPAでのページ遷移はハッシュを利用して実装されます。この方式をフロントエンドルーティングと呼び、バックエンドルーティングと区別します。
公式ドキュメント：https://router.vuejs.org/ja/
2. Vue Routerの基本的な実装
Vue Routerをアプリケーションに統合する基本的な手順：
- VueRouterコンストラクタをインポートする
- ルート定義オブジェクトを作成する
- Vueインスタンスにルーターを登録する
- テンプレートに
<router-view>コンポーネントを配置する
// コンポーネント定義
const LoginPage = {
template: '<div><h1>ログイン画面</h1></div>'
}
const RegisterPage = {
template: '<div><h1>登録画面</h1></div>'
}
// ルート設定
const routes = [
{ path: '/login', component: LoginPage },
{ path: '/register', component: RegisterPage }
]
// ルーターインスタンスの作成
const router = new VueRouter({
routes
})
// Vueインスタンスへのルーター登録
const app = new Vue({
router,
el: '#app'
})3. ルートリダイレクト
特定のパスにアクセスした際に別のパスに自動的に転送する方法：
// デフォルトルートの設定（非推奨）
// { path: '/', component: HomePage }
// リダイレクトによるデフォルトルートの設定
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: HomePage },
// 他のルート定義...
]4. ネストされたルーティング
childrenプロパティを使用して親子関係を持つルートを定義できます。子ルートのパスは先頭にスラッシュを付けないようにします。
// 親コンポーネント
const AccountComponent = {
template: `
<div>
<h2>アカウントセクション</h2>
<nav>
<router-link to="/account/profile">プロフィール</router-link> |
<router-link to="/account/settings">設定</router-link>
</nav>
<router-view></router-view>
</div>
`
}
// 子コンポーネント
const ProfileComponent = {
template: '<div><h3>プロフィールページ</h3></div>'
}
const SettingsComponent = {
template: '<div><h3>設定ページ</h3></div>'
}
// ネストされたルート設定
const routes = [
{
path: '/account',
component: AccountComponent,
children: [
{
path: 'profile',
component: ProfileComponent
},
{
path: 'settings',
component: SettingsComponent
}
]
}
]5. ネームドビュー
単一のURLで複数のビューを表示する場合に使用します。各<router-view>に名前を付けて、ルート定義で対応するコンポーネントを指定します。
// 複数のビューコンポーネント
const HeaderView = {
template: '<div><h1>ヘッダー</h1></div>'
}
const SidebarView = {
template: '<div><h2>サイドバー</h2></div>'
}
const ContentView = {
template: '<div><h2>メインコンテンツ</h2></div>'
}
// HTMLテンプレート
/*
<div id="app">
<router-view></router-view>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
</div>
*/
// ネームドビューのルート設定
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: HeaderView,
sidebar: SidebarView,
content: ContentView
}
}
]
})6. ルートパラメータと動的ルーティング
動的なセグメントを使用してルートパラメータを定義できます。
// 動的ルートの定義
const UserRoute = {
template: `
<div>
<h2>ユーザーID: {{ $route.params.id }}</h2>
<router-link :to="`/user/${$route.params.id}/posts`">投稿一覧</router-link>
<router-view></router-view>
</div>
`
}
const UserPostsRoute = {
template: `
<div>
<h3>ユーザーの投稿</h3>
<p>ユーザーID: {{ $route.params.id }}</p>
</div>
`
}
const routes = [
{ path: '/user/:id', component: UserRoute },
{ path: '/user/:id/posts', component: UserPostsRoute }
]