프로그래밍 방식 내비게이션
선언적 내비게이션을 위해 <router-link>로 anchor 태그를 만드는 것 외에도, 라우터 인스턴스 메서드를 사용해 프로그래밍 방식으로 내비게이션할 수 있습니다.
다른 location으로 이동하기
참고: 아래 예제에서는 라우터 인스턴스를 router라고 부릅니다. 컴포넌트 내부에서는 $router 속성으로 라우터에 접근할 수 있습니다. 예: this.$router.push(...). Composition API를 사용 중이라면 useRouter()을 호출해 접근할 수 있습니다.
다른 URL로 이동하려면 router.push를 사용하세요. 이 메서드는 히스토리 스택에 새 항목을 추가하므로, 사용자가 브라우저 뒤로 가기 버튼을 클릭하면 이전 URL로 이동합니다.
이 메서드는 <router-link>를 클릭할 때 내부적으로 호출되므로, <router-link :to="...">를 클릭하는 것은 router.push(...)를 호출하는 것과 같습니다.
| Declarative | Programmatic |
|---|---|
<router-link :to="..."> | router.push(...) |
인자는 문자열 경로일 수도 있고, location descriptor 객체일 수도 있습니다. 예:
// 리터럴 문자열 경로
router.push('/users/eduardo')
// path가 있는 객체
router.push({ path: '/users/eduardo' })
// params를 포함한 이름 있는 라우트로 라우터가 url을 만들도록 함
router.push({ name: 'user', params: { username: 'eduardo' } })
// query 포함, 결과는 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// hash 포함, 결과는 /about#team
router.push({ path: '/about', hash: '#team' })참고: 위 예제에서 보듯이 path가 제공되면 params는 무시됩니다. query는 그렇지 않습니다. 대신 라우트의 name을 제공하거나, 모든 매개변수를 포함한 전체 path를 수동으로 지정해야 합니다:
const username = 'eduardo'
// url을 수동으로 만들 수 있지만 인코딩은 직접 처리해야 합니다
router.push(`/user/${username}`) // -> /user/eduardo
// 위와 동일
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 가능하다면 `name`과 `params`를 사용해 자동 URL 인코딩의 이점을 누리세요
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params`는 `path`와 함께 사용할 수 없습니다
router.push({ path: '/user', params: { username } }) // -> /userparams를 지정할 때는 반드시 string 또는 number를 제공하세요(반복 가능한 params의 경우 이들의 배열도 가능). 그 외 타입(객체, 불리언 등)은 자동으로 문자열화됩니다. 선택적 params의 경우 빈 문자열("")이나 null을 값으로 제공해 제거할 수 있습니다.
prop to는 router.push와 같은 형태의 객체를 받으므로, 완전히 동일한 규칙이 둘 모두에 적용됩니다.
router.push와 다른 모든 내비게이션 메서드는 Promise 를 반환하므로, 내비게이션이 끝날 때까지 기다리고 성공 또는 실패 여부를 알 수 있습니다. 이에 대해서는 내비게이션 처리에서 더 자세히 다룹니다.
현재 location 바꾸기
이 메서드는 router.push처럼 동작하지만 이름 그대로 새 히스토리 항목을 추가하지 않고 현재 항목을 대체한다는 점만 다릅니다.
| Declarative | Programmatic |
|---|---|
<router-link :to="..." replace> | router.replace(...) |
router.push에 전달하는 to 인자에 replace: true 속성을 직접 추가할 수도 있습니다:
router.push({ path: '/home', replace: true })
// 다음과 동일
router.replace({ path: '/home' })히스토리 이동하기
이 메서드는 window.history.go(n)과 비슷하게, 히스토리 스택에서 앞으로 또는 뒤로 몇 단계 이동할지를 나타내는 하나의 정수를 매개변수로 받습니다.
예제
// 한 단계 앞으로 이동, router.forward()와 동일
router.go(1)
// 한 단계 뒤로 이동, router.back()과 동일
router.go(-1)
// 3단계 앞으로 이동
router.go(3)
// 이동할 기록이 그만큼 없으면 조용히 실패
router.go(-100)
router.go(100)히스토리 조작
router.push, router.replace, router.go가 window.history.pushState, window.history.replaceState, window.history.go에 대응하며, 실제로 window.history API를 모방한다는 점을 눈치채셨을 수 있습니다.
따라서 이미 Browser History API에 익숙하다면 Vue Router에서 히스토리를 조작하는 것도 익숙하게 느껴질 것입니다.
또 한 가지 언급할 점은, Vue Router 내비게이션 메서드(push, replace, go)는 라우터 인스턴스를 만들 때 어떤 history 옵션을 전달하든 일관되게 동작한다는 것입니다.