Vue Router

Vue에서 SPA 라우팅을 처리하는 공식 라이브러리다.

기본 사용법

import { createRouter, createWebHistory } from 'vue-router'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

주요 기능

동적 라우트 매칭

// /user/123 → params.id = '123'
{ path: '/user/:id', component: User }

중첩 라우트

{
  path: '/user/:id',
  component: User,
  children: [
    { path: 'profile', component: UserProfile },
    { path: 'posts', component: UserPosts }
  ]
}

네비게이션 가드

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    return '/login'
  }
})

---

관련 문서

• 202 Vue.js