[Vite + Vue3 실전 가이드]④ SPA 라우팅 구현

라우팅이란 무엇인가?

라우팅(Routing)은 싱글 페이지 애플리케이션(SPA)에서 페이지 간 전환을 담당하는 핵심 기능입니다. Vue 3에서는 공식 라우터 라이브러리인 vue-router를 사용하여 URL에 따라 다른 컴포넌트를 렌더링할 수 있습니다.

라우팅은 사용자가 요청한 URL에 따라 해당 컴포넌트를 연결하는 과정으로, 페이지 새로고침 없이 콘텐츠를 동적으로 교체할 수 있어 사용자 경험이 향상됩니다.

Vue Router 기본 개념

Vue 3에서는 vue-router@4를 사용합니다. 이 버전은 Composition API와 완전하게 호환되며 TypeScript 기반에도 최적화되어 있습니다. 사용 목적은 다음과 같습니다.

• SPA 페이지 전환 처리
• 파라미터 기반 게시글/상품 상세 페이지 구성
• 인증 기반 페이지 접근 제어
• 관리 페이지와 같은 중첩 구조 구현
  
  

vue-router 설치 및 기본 설정

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 },
]

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

export default router

라우터를 프로젝트에 등록하기

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

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

뷰에서 라우팅 요소 사용하기

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">홈</router-link>
    <router-link to="/about">소개</router-link>
  </nav>
  <router-view />
</template>

<router-link>는 내부적으로 a 태그를 렌더링하며, 페이지 새로고침 없이 경로를 이동합니다. <router-view>는 현재 경로에 해당하는 컴포넌트를 렌더링합니다.

고급 라우팅 구성: 동적, 중첩, 404 처리

// 동적 라우팅
{ path: '/post/:id', component: PostDetail }

// 중첩 라우팅
{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: 'users', component: UserList },
    { path: 'settings', component: AdminSettings }
  ]
}

// NotFound 처리
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

핵심 요점 정리 (TNPREP 방식)

• Theme: Vue SPA에서의 라우팅 구현
• Number: 4회차
• Point: vue-router를 활용한 정적/동적/중첩 라우팅 구현
• Reason: 페이지 구조 설계와 사용자 경험을 위한 핵심 요소
• Example: createRouter 설정, router-view 사용, NotFound 처리
• Point: 실무에서 필수적인 SPA 구성 요소로 철저히 이해 필요

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.