Router push, replace, go

라우터에서는 <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 데이터를 가져와 현재 위치를 확인하고

 

이동이 가능한지 체크한다