👩🎓 과제 진행 도중 push로 적혀있는 부분을 replace로 변경하라는 피드백을 듣고 둘의 차이점에 대하여 정리해보았다.
📁router.push()와 router.replace()
router.push()와 router.replace()는 Vue.js 애플리케이션에서 라우터를 제어하는 데 사용되는 메서드이다. 그러나 두 메서드는 라우팅 동작에서 서로 다른 역할을 한다.
각각에 대하여 보다 자세하게 알아보자.
📌 1.router.push()
- 새로운 URL을 추가하고 브라우저 히스토리 스택에 새 항목을 추가한다.
- 이전 페이지로 돌아가려면 뒤로 가기 버튼을 클릭하면 된다.
- 이 메서드는 일반적으로 링크를 클릭했을 때 사용된다.
// URL을 '/home'으로 변경하고 이전 URL을 브라우저 히스토리에 저장
this.$router.push('/home');
📌 2. router.replace()
- 현재 URL을 대체하고 브라우저 히스토리 스택에 새 항목을 추가하지 않는다.
- 이전 페이지로 돌아갈 수 없다.
- 이 메서드는 로그인 페이지와 같은 페이지 전환 시 사용된다.
// URL을 '/login'으로 변경하고 이전 URL을 브라우저 히스토리에 저장하지 않음
this.$router.replace('/login');📚 결론
간단히 요약하자면, router.push()는 뒤로 가기 버튼으로 이전 페이지로 돌아갈 수 있지만, router.replace()는 이전 페이지로 돌아갈 수 없다.
