[TIL 17] vue-router를 이용한 라우팅

nini·2025년 3월 30일

JavaScript KB KB it's your life TIL vue.js

KB IT's Your Life

목록 보기

17/40

Vue Router란?

Vue Router는 Vue.js 애플리케이션에서 페이지 간 이동(라우팅)을 관리하는 공식 라이브러리

웹사이트에서 페이지를 클릭하면 새로운 화면으로 넘어가는 것이 필요하지?

-> Vue는 SPA(Single Page Application, 단일 페이지 애플리케이션) 방식이라 페이지가 새로고침 없이 동작하는데, 이때 Vue Router를 사용하면 페이지 이동처럼 보이게 만들 수 있다

라우트(Route)

특정 URL에 해당하는 화면(컴포넌트)을 지정하는 설정

예: /home → HomeView.vue, /about → AboutView.vue

라우터(Router)

여러 개의 라우트(Route) 설정을 관리하는 객체

VueRouter를 생성해서 등록하면 페이지 이동이 가능해짐

네비게이션(Navigation)

<router-link> 태그를 사용해서 페이지 이동을 쉽게 할 수 있음

this.$router.push('/about') 같은 코드로도 이동 가능!

사용자는 직접 경로를 입력해 이동하기도 한다. 하지만 동적 컴포넌트의 조합만으로는 이런 기능을 제공할 수 없다.
(여러 화면을 가진 애플리케이션을 만들 수는 있지만 특정 화면으로 직접 이동할 수 없으며, 반드시 초기 화면을 거쳐야만 한다)

이 문제를 해결하기 위해서는 라우팅 기능을 적용하여 개발이 필수다!

vue-router란?

SPA(단일 페이지 애플리케이션: Single Page Application)

하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공
여러 화면을 하나의 페이지 안에서 제공, 화면을 별도로 로딩하지 않음

→ 화면마다 고유의 식별자(URI)를 기반으로 화면을 렌더링해야 함

(URI: Uniform Resource Identifier, 인터넷에서 어떤 특정한 파일, 웹페이지, 이미지 등을 찾기 위한 주소 체계)

요청한 URI 경로에 따라 각각 다른 화면이 렌더링 되도록 함 → vue-router 라이브러리 이용

제공하는 기능은?
- 중첩된 경로, 뷰를 매핑할 수 있다
- 컴포넌트 기반의 라우팅을 구현할 수 있다
- Vue.js의 전환 효과(Transition)를 적용할 수 있다
- 히스토리 모드와 해시 모드를 모두 사용할 수 있다
- 쿼리스트링, 파라미터, 와일드 카드를 사용하여 라우팅을 구현할 수 있다

vue-router의 기본 사용법

createRouter()

router 객체를 생성 - URI와 이 경로를 처리할 컴포넌트 매핑
createRouter() 함수를 호출할 때 전달하는 인자 객체의 history 속성에는 라우터가 사용할 라우팅 모드를 지정하고 routes 속성에는 요청 경로에 따라 어떤 컴포넌트를 렌더링할지를 지정

import { createRouter, createWebHistory } from 'vue-router'
…
const router = createRouter({
	history: createRouter(),
	routes: [
		{ path: '/', components: Home }, // https://localhost:5173/ -> 메인 화면(홈)
		{ path: '/about', components: About },
		{ path: '/members', components: Members },
		{ path: '/videos', components: Videos},
	]
});

router 객체의 등록

Vue 인스턴스에 등록하기 위해 src/main.js에서 router 객체를 등록

const app = createApp(App) 
app.use(router) // *
app.mount('#app')

<RouterView>

각 경로별 컴포넌트를 렌더링할 위치를 지정하는 컴포넌트

<template>
	<div class="container">
		<Header />
		<RouterView/>
	</div>
</template>

<RouterLink to=”경로”>

화면 전환을 위한 링크 생성

<router-link to="[등록시킬 URI 경로]">[링크 텍스트]</router-link>

router → router 모듈이라고 함
index.js → from ‘router’
views → 페이지 컴포넌트(/about)
- pages로 파일 이름을 바꾸기도 함

component: HomeView, → 지금 당장해라
component: () => import('../views/AboutView.vue'), → 나중에 로딩해라(about이 들어와서 함수가 호출될 때)

// route level code-splitting 라우트 단위 코드 분할 -> 특정 라우트(페이지)별로 코드를 나누어, 해당 페이지가 필요할 때만 로드하도록 설정한다
// this generates a separate chunk (About.[hash].js) for this route 이 설정은 해당 라우트를 위한 별도의 청크(파일)를 생성한다
// which is lazy-loaded when the route is visited. 이 페이지는 사용자가 해당 라우트(/about 경로)를 방문할 때만 지연 로딩(Lazy Loading)된다

import router from './router' → index.js의 설정을 가져옴

직접 a 태그를 쓰면 안 되고 라우터 링크를 써주어야 한다

/about 문자열로 해석

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>

router 객체와 currentRoute 객체

컴포넌트에서 router 객체 접근하기

this.$router
- src/router/index.js에서 작성한 router 객체
- 전체 라우트 정보 파악
- push(). replace(), go() 등의 메서드 이용 가능
Router 관련 정보 접근

구분	Options API	Composition API
라우터 객체	this.$router	const router = useRouter()
매칭된 라우트(currentRoute)	this. $route 또는 this.$ router.currentRoute	const currentRoute = useRoute()

currentRoute 객체의 주요 속성

params, query

동적 라우트

일정한 패턴의 URI 경로를 하나의 라우트에 연결하는 방법
URI 경로의 일부에 실행에 필요한 파라미터 값을 포함하여 컴포넌트에서 이용

동적 라우트 → :파라미터를 사용하여 변하는 값을 포함하는 라우트

예) /users/:id → /users/1, /users/2 등으로 변형 가능

URI에서 값 가져오기 useRoute().params.id 사용 → 경로(path)에서 데이터를 가져온다는 뜻
(URI는 자원을 식별하는 모든 방식을 포함함)

즉, "한 개의 페이지에서 여러 개의 데이터를 구분할 때 사용하는 라우팅 방식!

중첩 라우트

중첩 라우트

/members/1로 요청했을 때 화면을 완전히 전환
화면 전환없이 화면을 중첩시켜서 보아야 하는 경우 → 중첩 라우트(Nested Route)
팝업 화면 구성 시 주로 사용

중첩 라우트는 한 페이지 내에서 여러 개의 라우트 변경을 가능하게 함

children: []을 사용해 하위 라우트 설정

router-view를 사용해 중첩된 라우트의 내용을 표시

/members/1/profile, /members/1/activity 같은 구조적인 URL을 만들 수 있음!

명명된 라우트와 명명된 뷰

명명된 라우트(Named Route)

라우트 정보에 이름을 부여하는 방법
URI 경로가 아닌 이름을 이용해 경로를 전환

"라우트의 별명" 같은 개념

path 대신 name을 사용해 유지보수 & 가독성 향상

router-link, this.$router.push() 에서 name을 사용하면 더 직관적이고 편리함!

명명된 뷰(Named View)

<router-view>를 중첩시키지 않고 한꺼번에 화면에 나타내야 하는 경우 -> 이때 사용할 수 있는 것이 명명된 뷰
<router-view>에 이름을 부여하고 여러 컴포넌트를 지정된 이름의 뷰로 나타내도록 함
이름이 지정되지 않은 뷰 -> 기본 뷰(default view)

프로그래밍 방식의 라우팅 제어

라우터 객체의 메서드

라우터 객체 접근

[Options API 적용]
const router = this.$router;

[Composition API 적용]
import { useRouter } from 'vue-router'
....
const router = useRouter();

메서드	기능	히스토리 기록
`push(to)`	새로운 페이지로 이동	⭕
`replace(to)`	현재 페이지를 새로운 페이지로 변경	❌ (기록 덮어씀)
`go(n)`	히스토리 이동 (`n`만큼)	-
`back()`	뒤로 가기 (`go(-1)`)	-
`forward()`	앞으로 가기 (`go(1)`)	-

push(to) vs replace(to) 차이

push() → 뒤로 가기 가능
replace() → 이전 페이지 기록을 덮어씌움 (뒤로 가기 불가능)

push() 메서드

이동 경로를 정적인 문자열을 인자로 전달 가능
경로 정보를 담은 객체를 인자로 전달 가능
push() 사용하는 방법

// 문자열 직접 전달
router.push('/home')
// 객체 정보로 전달
router.push({ path: 'about' })
// 명명된 라우트 사용
router.push({ name: 'members/id', params: { id: 1} })
// 쿼리 문자열 전달 ex) /board?pageno=1&pagesize=5
router.push({ path: '/board', query: { pageno: 1, pagesize: 5 }})

currentRoute & router

개념	설명	관련 메서드
`currentRoute`	현재 활성화된 라우트 정보(경로, 파라미터 등)를 담고 있음	`useRoute()` 사용
`router`	라우트를 변경하는 기능을 제공하는 객체	`push()`, `replace()`, `go()`, `back()`, `forward()`

내비게이션 가드(Navigation Guard)

Vue Router에서 특정 경로로 이동할 때, 그 이동을 제어하는 기능
예를 들어, 로그인이 필요한 페이지에서 로그인 여부를 확인할 때 사용

라우팅이 일어날 때 프로그래밍 방식으로 내비게이션을 취소하거나, 다른 경로로 리디렉션 → 내비게이션을 안전하게 보호하는 기능을 수행
- 예) 인증 받은 사용자만 해당 페이지 접근, 인증 받지 않는 사용자인 경우 로그인 경로로 이동
라우트하는 경로(path)가 바뀔 때 반응
동일한 경로에서 파라미터나 쿼리 문자열이 변경될 때는 작동하지 않음
사용 수준
- 전역 수준
- 라우트 수준
- 컴포넌트 수준

내비게이션 가드 종류	설명
전역 가드	`router.beforeEach()`, `router.beforeResolve()`, `router.afterEach()`
라우트 가드	`beforeEnter` (개별 라우트마다 설정)
컴포넌트 가드	`beforeRouteEnter`, `beforeRouteUpdate`, `beforeRouteLeave`

전역 가드 → 모든 페이지 이동 전에 실행 (beforeEach())

라우트 가드 → 특정 라우트에서만 실행 (beforeEnter)

컴포넌트 가드 → 개별 컴포넌트에서 실행 (beforeRouteEnter, beforeRouteLeave 등)

nini

사용자를 고려한 디자인과 UX에 관심있는 개발자

이전 포스트

[TIL 16] Composition API

다음 포스트