Vue Router 4 완벽 가이드 — 기초부터 중첩 라우트까지

Vue Router 4 설치

npm install vue-router@4

기본 라우터 설정

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

export default createRouter({
  history: createWebHistory(),
  routes,
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

동적 라우트

URL 파라미터를 받는 라우트입니다.

const routes = [
  { path: '/user/:id', component: UserDetail },
]

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id) // URL의 :id 값
</script>

중첩 라우트

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '',        component: DashboardHome },
      { path: 'profile', component: DashboardProfile },
      { path: 'settings', component: DashboardSettings },
    ],
  },
]

부모 컴포넌트에 <RouterView />를 추가해야 자식 컴포넌트가 렌더링됩니다.

프로그래매틱 네비게이션

import { useRouter } from 'vue-router'

const router = useRouter()

// 이동
router.push('/about')
router.push({ name: 'user', params: { id: 123 } })

// 뒤로 가기
router.back()

네비게이션 가드

인증이 필요한 페이지를 보호할 때 사용합니다.

router.beforeEach((to, from) => {
  const isAuthenticated = !!localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { path: '/login' }
  }
})

라우트에 메타 정보를 추가합니다.

{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }

RouterLink 활용

<template>
  <!-- 기본 링크 -->
  <RouterLink to="/about">About</RouterLink>

  <!-- active 클래스 커스텀 -->
  <RouterLink to="/about" active-class="text-blue-600 font-bold">
    About
  </RouterLink>
</template>

정리

기능	메서드/훅
현재 라우트 정보	useRoute()
라우터 조작	useRouter()
전역 가드	router.beforeEach()
컴포넌트 가드	onBeforeRouteLeave()