Vue에서 SPA 라우팅 구현 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js 프레임워크를 사용하는 웹 개발자(초급~중급)

난이도: 기초 Vue 지식을 가정한 중간 수준 설명

핵심 요약

• SPA(Single Page Application)는 브라우저 재로딩 없이 페이지 전환을 지원하는 애플리케이션으로, Vue Router(vue-router)가 라우팅을 담당
• 루트 정의는 router/index.js에서 createRouter와 createWebHistory를 통해 구성
• SPA 내 라우팅은 와 컴포넌트를 활용하여 구현

섹션별 세부 요약

1. Vue Router 설치

• npm install vue-router 명령어로 패키지 설치
• Vue 3 프로젝트에서 vue-router 4.x 버전 사용 권장

2. 라우트 정의 및 설정

• router/index.js 파일에서 createRouter와 createWebHistory를 사용하여 라우트 설정

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: AboutView }
]
const router = createRouter({ history: createWebHistory(), routes })
export default router

• createWebHistory()는 HTML5 History 모드를 사용하여 URL 구조를 개선

3. Vue 애플리케이션에 라우터 통합

• main.js에서 app.use(router)로 라우터 등록

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

4. 라우팅 컴포넌트 사용

• Home: SPA 내부에서 페이지 전환을 위한 링크
• : 현재 URL에 해당하는 컴포넌트를 렌더링하는 영역

결론

• Vue Router를 사용하여 SPA의 페이지 전환을 관리할 때, HTML5 History 모드를 사용하면 URL이 cleaner 해짐
• 와 는 SPA 라우팅의 핵심 컴포넌트로 반드시 사용해야 함
• 라우트 정의 시 createWebHistory() 사용을 권장하여 SEO 및 공유 링크 편의성을 높임