Vue Router - push, replace,history

프로그래밍 방식 네비게이션

선언적 방식	프로그래밍 방식
<router-link :to="...">	router.push(...)

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

// 리터럴 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. router.replace(location)

router.push 와 동일한 역할을 하지만,
새로운 히스토리 항목에 추가하지 않고 탐색한다는 점에 있어서 차이가 있다.

3. router.go(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, reouter.go 는
window.history.pushState, window.history.replaceState, window.history.go 와 상응한다. (window.history API 기반)