라우터 설정

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() 이후 마운트