🔥 $router

Router 인스턴스를 나타낸다.
Router 인스턴스는 웹 애플리케이션 전체에서 딱 하나만 존재하는 것으로 전반적인 라우터 기능을 관리한다.

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

app - 라우터를 사용하는 루트 Vue 인스턴스

mode - 라우터 모드

options - 라우터의 base, mode routes들을 반환함.

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

현재 활성화된 Route의 상태를 저장한 객체이다
페이지 이동 등으로 라우팅이 발생할 때마다 생성된다.
현재의 경로 및 URL 파라미터 등의 정보를 이 객체에서 받을 수 있다.

📝 Route 객체의 프로퍼티와 메서드

path - 현재 라우트의 경로를 나타내는 문자열.

params - 정의된 URL 패턴과 일치하는 파라미터의 키-값 쌍을 담고 있는 객체. 파라미터가 없다면 빈 객체.

query - 쿼리 문자열의 키-쌍 값을 담고 있는 객체. 쿼리가 없다면 빈 객체. (경로가 /foo?user=1 이면 $route.query.user == 1이 된다.

hash - 현재 URL에 URL 해시가 있을 경우 라우트의 해시값을 갖는다. 해시가 없다면 빈 객체

fullPath - 쿼리 및 해시를 포함하는 전체 URL

name - 이름을 가진 라우트인 경우 라우트의 이름