vue-router의 다양한 인스턴스 메소드를 사용

메소드설명

push	URL 이동. 히스토리 스택에 추가되므로 뒤로가기 버튼 동작시 이전 URL 로 이동
replace	URL 이동. 현재 URL 을 대체하기 때문에 히스토리 스택 쌓지 않음
go	숫자만큼 뒤로가기 또는 앞으로 가기 (음수:backward, 양수: forward)

👉🏻 Vue.js 2.2.0 이후로 push, replace 에서 onComplete, onAbort 콜백 함수를 제공합니다.
onComplete : 탐색 성공
onAbort: 중단(현재 탐색이 완료되기 전 동일한 경로로 이동하거나 다른 경로 이동)

 

1.router.push(location, onComplete?, onAbort?)

Vue 인스턴스 내부의$router를 사용하여this.$router.push와 같이 사용할 수도 있습니다.
router.push는 다른 URL로 이동할 때 사용됩니다. 이 메소드는 새로운 URL을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL로 이동하게 됩니다.
를 클릭하면router.push(...)를 호출하는 것과 같습니다.

 

전달 인자

전달인자는 문자열 또는 객체가 될 수 있습니다.

// 리터럴 
string router.push('home') 
// object 
router.push({ path: 'home' }) 
// 이름을 가지는 라우트 
router.push({ name: 'user', params: { userId: 123 }}) 
// 쿼리와 함께 사용, 결과는 /register?plan=private 입니다. 
router.push({ path: 'register', query: { plan: 'private' }})

2.2.0 버전 이후 router.push와 router.replace 메소드는 두번째와 세번째 전달인자로 onComplete와 onAbort 콜백을 제공합니다. 이 콜백은 탐색이 성공적으로 완료되었거나 중단 될 때 호출 됩니다.

 

2. router.replace(location)

router.push와 같은 역할을 하지만 차이점은 새로운 URL을 히스토리 스택에 추가하지 않습니다. 이름에서 알 수 있듯이 현재 URL을 대체합니다.
<route-link :to="..." replace>를 클릭하면 router.replace(...)를 호출하는 것과 같습니다.

3. router.go(n)

이 메소드는 window.history.go(n)과 비슷하게 히스토리 스택에서 n 만큼 앞, 뒤로 이동하는 메소드입니다.

// 한 단계 앞으로 갑니다. history.forward()와 같습니다. history.forward()와 같습니다. 
router.go(1) 
 
// 한 단계 뒤로 갑니다. history.back()와 같습니다. 
router.go(-1) 
 
// 3 단계 앞으로 갑니다. 
router.go(3) 
 
// 지정한 만큼의 기록이 없으면 자동으로 실패 합니다. 
router.go(-100) router.go(100)
 

4. History 조작

router.push, router.replace, router.go는 각각 window.history.pushState, window.history.replaceState, window.history.go에 매칭됩니다.
vue-router의 네비게이션 메소드(push, replace, go)는 모든 라우터 모드(history, hash, abstract)에서 동일하게 동작합니다.

참고

• https://router.vuejs.org/kr/guide/essentials/navigation.html

출처: https://beomy.tistory.com/70 [beomy]