본 포스팅은, 뷰 라우터 공식 문서(https://router.vuejs.org/kr/guide/essentials/history-mode.html)와
'캡틴판교의 Cracking Vue.js' 내용에 기반하여 작성된 포스팅입니다.
자세한 내용은 공식 문서와 '캡틴판교의 Cracking Vue.js'를 참조해주세요!
1. 프로그래밍 방식 네비게이션
프로그래밍 방식 네비게이션은, 현재 프로젝트를 진행하면서도 정말 많이 사용하고 있는 기능!
<router-link>를 사용하여 선언적 네비게이션용 anchor 태그를 만드는 것 외에도 라우터의 인스턴스 메소드를 사용하여 프로그래밍적으로 페이지의 이동을 수행할 수 있다.
router.push(location, onComplete?, onAbort?)
// vue 2.x
this.$router.push
// 이렇게도 접근해서 사용 가능
// vue 3.x
import { useRouter } from "vue-router";
const router = useRouter();
const movePage = () => { router.push('home') }
//이런식으로 라우터 인스턴스를 생성해줘서 사용하면 된다!2. router-push(...)
router-push
라우터의 인스턴스를 이용하여 다른 URL로 이동할 수 있는 메소드로, 새로운 항목을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 URL로 이동하게 된다.
이것은<router-link>를 클릭할 때 내부적으로 호출되는 메소드이므로<rounter-link:to="..."를 클릭하면router.push(...)를 호출하는 것과 같다.
출처 (https://router.vuejs.org/kr/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
전달인자는 문자열 경로 또는 로케이션 디스크립터 객체가 될 수 있다.
// 리터럴 string
router.push('home')
// location descriptor 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 콜백을 제공한다.
이 콜백은 탐색이 성공적으로 완료되거나 (모든 비동기 훅이 해결된 후) 또는 중단 (현재 탐색이 완료되지 전에 동일한 경로로 이동하거나 다른 경로 이동)될 때 호출된다.
3. router-replace(location)
router-replace(location)
<router-push>와 같은 역할을 하지만 유일한 차이는 새로운 히스토리 항목에 추가하지 않고 탐색한다는 것이다. 이름에서 알 수 있듯이 현재 항목을 대체한다.
출처 (https://router.vuejs.org/kr/guide/essentials/navigation.html#router-push-location-oncomplete-onabort)
4. router-go(n)
router-go(n)
이 메소드는
window.history.go(n)와 비슷하게 히스토리 스택에서 앞으로 또는 뒤로 이동하는 단계를 나타내는 하나의 정수를 매개 변수로 사용합니다.
// 한 단계 앞으로 갑니다. history.forward()와 같습니다. history.forward()와 같습니다.
router.go(1)
// 한 단계 뒤로 갑니다. history.back()와 같습니다.
router.go(-1)
// 3 단계 앞으로 갑니다.
router.go(3)
// 지정한 만큼의 기록이 없으면 자동으로 실패 합니다.
router.go(-100)
router.go(100)