라우터에서는 <router-link>를 통해 a 태그를 사용한 페이지 전환이 가능한데
이외에도 $router 객체의 push, replace, go 메소드를 통해 페이지 전환이 가능하다
push, replace go의 차이는 다음과 같다
PUSH
methods: {
gotoHome() {
this.$router.push('/home');
},
gotoAbout() {
this.$router.push('/about');
}
}
push는 해당 url로 이동하는 메소드인데
이전 경로를 히스토리 스택에 저장하기 때문에 이동 후 뒤로가기 버튼을 통해 원래 페이지로 돌아올 수 있다.
REPLACE
methods: {
replaceHome() {
this.$router.replace('/home');
},
replaceAbout() {
this.$router.replace('/about');
}
}
replace는 push와 마찬가지로 해당 url로 이동하지만
이전 경로를 히스토리 스택에 저장하지 않기때문에 이동 후 뒤로가기 버튼으로 원래 페이지로 돌아갈 수 없다(생략됨).
GO
methods: {
goBack() {
this.$router.go(-1); // 뒤로 이동
},
goForward() {
this.$router.go(1); // 앞으로 이동
}
}
go는 push나 replace와 다르게 url로 이동하는게 아니라
히스토리 스택을 기반으로 이동한다
양수는 앞으로 이동, 음수는 뒤로 이동한다.
이때 스택 범위를 벗어날 수 있기 때문에 따로 처리를 한다고 한다
methods: {
goForward() {
const currentRouteIndex = this.$router.history.current.index;
const nextRouteIndex = currentRouteIndex + 1;
// 더 이상 이동할 페이지가 없는 경우
if (nextRouteIndex >= this.$router.history.stack.length) {
// 처리할 내용 추가
console.log("더 이상 앞으로 갈 수 없습니다.");
return;
}
this.$router.go(1); // 앞으로 이동
}
}
router 객체의 history.current.index 데이터를 가져와 현재 위치를 확인하고
이동이 가능한지 체크한다
'Vue' 카테고리의 다른 글
디렉티브(Directives) (0) | 2024.05.08 |
---|---|
Vuex로 중앙에서 상태 관리하기 (0) | 2024.05.07 |
Vue 프로젝트 경로의 @ (0) | 2024.05.07 |
emit으로 자식 -> 부모 데이터 전달 (0) | 2024.05.03 |
Vue 프로젝트 동작 순서 (0) | 2024.05.02 |