ルーター設定

12.1.1. createRouter 設定

• ルーターインスタンスは createRouter と createWebHistory を使用して生成します。
• Hash モード（createWebHashHistory）は使用しません。すべてのプロジェクトは History モードを使用します。
• ルーター設定ファイルは src/router/index.ts に作成します。

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { routes } from './routes'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(_to, _from, savedPosition) {
    return savedPosition ?? { top: 0 }
  },
})

export default router

---

12.1.2. ルート定義構造

• ルート配列は RouteRecordRaw[] 型で定義します。
• 各ルートには path、name、component、meta プロパティを明示します。
• name は必須であり、プログラマティックナビゲーションに使用します。
• meta プロパティを通じて認証要否、権限、ページタイトルなどを定義します。

// src/router/routes.ts
import type { RouteRecordRaw } from 'vue-router'

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue'),
    meta: { title: 'ホーム', requiresAuth: false },
  },
  {
    path: '/users',
    name: 'UserList',
    component: () => import('@/views/user/UserListView.vue'),
    meta: { title: 'ユーザー一覧', requiresAuth: true, roles: ['admin'] },
  },
  {
    path: '/users/:id',
    name: 'UserDetail',
    component: () => import('@/views/user/UserDetailView.vue'),
    meta: { title: 'ユーザー詳細', requiresAuth: true },
  },
]

• meta 型は vue-router モジュール拡張で定義します。

// src/router/types.ts
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    title: string
    requiresAuth: boolean
    roles?: string[]
  }
}

---

12.1.3. ネストされたルート

• レイアウトを共有するページはネストされたルート（children）で構成します。
• 親ルートのコンポーネントには <RouterView /> を配置します。
• 親ルートに name を付与しないか、redirect を設定して直接アクセスを防止します。

// src/router/routes.ts（ネストされたルートの例）
{
  path: '/settings',
  component: () => import('@/layouts/SettingsLayout.vue'),
  redirect: { name: 'SettingsProfile' },
  children: [
    {
      path: 'profile',
      name: 'SettingsProfile',
      component: () => import('@/views/settings/ProfileView.vue'),
      meta: { title: 'プロフィール設定', requiresAuth: true },
    },
    {
      path: 'security',
      name: 'SettingsSecurity',
      component: () => import('@/views/settings/SecurityView.vue'),
      meta: { title: 'セキュリティ設定', requiresAuth: true },
    },
  ],
}

<!-- src/layouts/SettingsLayout.vue -->
<template>
  <div class="settings-layout">
    <SettingsSidebar />
    <main>
      <RouterView />
    </main>
  </div>
</template>

---

12.1.4. ルーター登録

• main.ts で app.use(router) を呼び出してルーターを登録します。
• router.isReady() を使用して初期ナビゲーションが完了した後にアプリをマウントします。
• Pinia より後にルーターを登録します。ガードで Store にアクセスできる必要があるためです。

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

router.isReady().then(() => {
  app.mount('#app')
})

項目	規則
ルーターモード	createWebHistory 必須
ルート型	RouteRecordRaw[] 明示
name プロパティ	すべてのリーフルートに必須
meta 型	モジュール拡張で型安全性を確保
登録順序	Pinia 登録後にルーター登録
マウント時点	router.isReady() 後にマウント