📚 Vue Router와 라우팅 개념 정리
Spring을 하다가 Vue.js로 넘어오면서 라우팅 개념이 좀 달라졌는데, 오늘은 이 부분을 확실하게 정리해보려고 한다.
🌐 라우팅이란?
라우팅은 크게 두 가지 의미를 가진다.
네트워크에서 경로를 선택하는 프로세스
웹 애플리케이션에서 다른 페이지 간의 전환과 경로를 다루는 프로세스
❌ 라우팅이 없다면?
URL로 페이지 변화를 감지할 수 없음
현재 뭘 렌더링 중인지 상태 파악 불가능
URL이 1개라서 새로고침하면 처음 페이지로 돌아감
원하는 페이지 링크를 공유할 수 없음
브라우저 뒤로가기도 못씀
🔄 SSR vs CSR에서의 라우팅
SSR 라우팅 (Spring Boot)
Spring Boot에서는 서버가 라우팅을 처리한다. JSP(Java + HTML)가 실행되면 Java 코드는 처리되고 HTML만 클라이언트로 전달된다. 매 요청마다 이 과정이 반복되기 때문에 우리 눈에는 페이지가 깜빡이는 것처럼 보인다.
클라이언트 요청(/list) → 컨트롤러 처리 → Model and View 처리
→ ViewResolver가 View 찾기 → JSP를 클라이언트에게 전송CSR/SPA에서의 라우팅
SPA에서는 클라이언트(브라우저)가 라우팅을 수행한다. 전체 페이지를 다시 로드하지 않고, JavaScript가 필요한 데이터만 JSON 형태로 비동기 요청해서 가져온다.
실제로는 하나의 페이지지만, URL에 따라 다른 컴포넌트를 렌더링해서 마치 여러 페이지를 쓰는 것처럼 보이게 한다.
🛠 Vue Router 시작하기
기존 프로젝트에 router를 추가하고 싶다면:
bashCopynpm i vue-router
새 프로젝트를 만들 때는 Vue CLI에서 router 관련 질문에 Yes를 선택하면 된다.
프로젝트 구조
vue-project를 생성하면 주요 폴더/파일은 다음과 같다:
main.js
App.vue
components/
router/
views/
Router 설정하기
- main.js
javascriptCopyimport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')- App.vue
vueCopy<template>
<nav>
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />
</template>- router/index.js
javascriptCopyimport { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
})
export default router🔍 동적 라우팅 예시
javascriptCopy{
path: '/user/:id',
name: 'user',
component: UserView,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}🚀 프로그래밍 방식 네비게이션
javascriptCopy// 다른 URL로 이동
router.push('/home')
// 현재 페이지 교체 (히스토리에 안 남음)
router.replace('/about')마무리
Spring에서 Vue로 넘어올 때 가장 헷갈렸던 부분이 라우팅이었는데, 이제 좀 감이 잡히는 것 같다. 다음 포스팅에서는 네비게이션 가드와 라우터 모드에 대해 더 자세히 알아보도록 하자! 😎
참고 : Vue Router 공식 문서
