프로그래밍 방식 내비게이션
선언적으로 내비게이션을 하기 위해 <router-link>를 사용하여 앵커 태그를 만드는 것 외에도, 라우터의 인스턴스 메서드를 사용하여 프로그래밍 방식으로 내비게이션할 수 있습니다.
다른 위치로 이동하기
참고: 아래 예제에서는 라우터 인스턴스를 router로 지칭합니다. 컴포넌트 내부에서는 $router 속성을 사용하여 라우터에 접근할 수 있습니다. 예: this.$router.push(...). Composition API를 사용하는 경우, useRouter()를 호출하여 라우터에 접근할 수 있습니다.
다른 URL로 이동하려면 router.push를 사용하세요. 이 메서드는 히스토리 스택에 새 항목을 추가하므로, 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 URL로 이동하게 됩니다.
이 메서드는 <router-link>를 클릭할 때 내부적으로 호출되므로, <router-link :to="...">를 클릭하는 것은 router.push(...)를 호출하는 것과 동일합니다.
| 선언적 | 프로그래밍 방식 |
|---|---|
<router-link :to="..."> | router.push(...) |
인수는 문자열 경로나 위치 설명 객체가 될 수 있습니다. 예시:
참고: path가 제공되면 params는 무시되며, 위 예시에서 볼 수 있듯이 query는 그렇지 않습니다. 대신, 라우트의 name을 제공하거나 모든 파라미터를 포함한 전체 path를 수동으로 지정해야 합니다:
params를 지정할 때는 반드시 string 또는 number(또는 반복 가능한 파라미터를 위한 이들의 배열)를 제공해야 합니다. 그 외의 타입(객체, 불리언 등)은 자동으로 문자열로 변환됩니다. 선택적 파라미터의 경우, 값을 빈 문자열("")이나 null로 제공하여 제거할 수 있습니다.
to prop은 router.push와 동일한 종류의 객체를 허용하므로, 동일한 규칙이 모두 적용됩니다.
router.push 및 다른 모든 내비게이션 메서드는 _Promise_를 반환하므로, 내비게이션이 완료될 때까지 기다리거나 성공 또는 실패 여부를 알 수 있습니다. 이에 대해서는 내비게이션 처리에서 더 자세히 다룹니다.
현재 위치 대체하기
이 메서드는 router.push와 비슷하게 동작하지만, 이름에서 알 수 있듯이 새로운 히스토리 항목을 추가하지 않고 현재 항목을 대체합니다.
| 선언적 | 프로그래밍 방식 |
|---|---|
<router-link :to="..." replace> | router.replace(...) |
router.push에 전달되는 to 인자에 replace: true 속성을 직접 추가하는 것도 가능합니다:
히스토리 이동
이 메서드는 하나의 정수형 파라미터를 받아, 히스토리 스택에서 앞으로 또는 뒤로 몇 단계 이동할지 지정합니다. 이는 window.history.go(n)과 유사합니다.
예시
히스토리 조작
router.push, router.replace, router.go가 window.history.pushState, window.history.replaceState, window.history.go의 대응 메서드라는 점을 눈치챘을 수 있습니다. 이들은 window.history API를 모방합니다.
따라서 브라우저 히스토리 API에 이미 익숙하다면, Vue Router를 사용할 때 히스토리 조작이 익숙하게 느껴질 것입니다.
또한 Vue Router의 내비게이션 메서드(push, replace, go)는 라우터 인스턴스를 생성할 때 전달된 history 옵션과 상관없이 일관되게 동작한다는 점도 언급할 가치가 있습니다.