Vue Router :: Router 인스턴스와 Route 객체 비교

$router 객체와 $route 객체는 이름은 비슷하지만, 전혀 다른 것이기 때문에 주의가 필요하다.

 

$router는 Router 인스턴스를 가리킨다. Router 인스턴스는 웹 애플리케이션 전체에서 딱 하나만 존재하는 것으로 전반적인 라우터 기능을 관리한다. 예를 들면 애플리케이션 전체에서 히스토리를 어떻게 관리할지에 대한 설정이나 router-link 요소 없이 프로그램적인 방법으로 페이지를 이동(this.$router.push())할 때 이 Router 인스턴스를 사용한다.

 

이와 달리 this.$route.params 등의 코드에 나오는 $route 는 Route 객체다. 페이지 이동 등으로 라우팅이 발생할 때마다 생성되며, 현재 활성화된 라우트의 상태를 저장한 객체이다. 즉, 현재의 경로 및 URL 파라미터 등의 정보를 이 객체에서 받을 수 있다. 컴포넌트 내부에 구현된 Router 훅 함수 등을 통해서 참조할 수 있고, watch에서 모니터링하기도 한다.

다음은 이 두 객체의 대표적인 기능을 표로 정리한 것이다.

 

Router 객체의 프로퍼티와 메서드

프로퍼티 / 메서드명	설명
app	라우터를 사용하는 루트 Vue 인스턴스
mode	라우터 모드
currentRoute	현재 라우트에 대한 Route 객체
push(location, onComplete?, onAbort?)	페이지 이동 실행. 히스토리에 새 엔트리를 추가하고 브라우저에서 뒤로 가기 버튼이 눌리면 앞의 URL로 돌아감.
replace(location, onComplete?, onAbort?)	페이지 이동 실행. 히스토리에 새 엔트리를 추가하지 않음.
go(n)	히스토리 단계에서 n 단계 이동. window.history.go(n)과 비슷함
back()	히스토리에서 한 단계 돌아감. history.back()과 같음
foward()	히스토리에서 한 단계 앞으로 나아감.
addRoute(routes)	라우터에서 동적으로 라우트를 추가

 

Route 객체의 주요 프로퍼티

프로퍼티	설명
path	현재 라우트의 경로를 나타내는 문자열.
params	정의된 URL 패턴과 일치하는 파라미터의 키-값 쌍을 담고 있는 객체. 파라미터가 없다면 빈 객체.
query	쿼리 문자열의 키-쌍 값을 담고 있는 객체. 쿼리가 없다면 빈 객체. (경로가 /foo?user=1 이면 $route.query.user == 1이 된다.
hash	현재 URL에 URL 해시가 있을 경우 라우트의 해시값을 갖는다. 해시가 없다면 빈 객체
fullPath	쿼리 및 해시를 포함하는 전체 URL
name	이름을 가진 라우트인 경우 라우트의 이름