locatio.href와 router.push는 둘다 네비게이션에서 사용되지만, 목적이 약간 다르다.
location.href
- JavasScrript의
window객체의 속성 중 하나
-> window 객체는 브라우저 환경에서의 전역 객체이며 브라우저 창에 대한 인터페이스를 제공한다. - 현재 페이지의 전체 URL을 나타낸다.
여기에는 프로토콜, 호스트, 경로 및 매개변수 등이 포함된다. - location.href를 새 URL로 설정하면 전체 브라우저 창이 해당 URL로 이동한다.
- 전체 페이지를 다시 로드하기에 Vue.js의 상태가 재설정된다.
- 완전한 페이지 새로고침 및 Vue.js 애플리케이션 외부의 완전히 다른 URL로 이동할 때 사용한다.
- 사용법
location.href = 'https://naver.com';
router.push
- Vue Router에서 제공하는 메소드이며, Vue.js 애플리케이션의 공식 라우터이다.
-> Vue Router는 Vue.js 애플리케이션의 라우팅을 관리하는 라이브러리이며, SPA 환경에서 여러 페이지처럼 보이는 경로 간의 전환을 할 수 있다. - 전체 페이지를 다시 로드하지 않고, SPA(Single Page Application) 내에서 탐색할 수 있다.
- URL 및 뷰가 업데이트 되지만 전체 페이지 새로고침이 발생하지 않는다.
이는 사용자 경험을 향상시키는데 유용하다. - Vue.js 애플리케이션 내에서 전체 페이지 새로고침 없이 클라이언트 측 내비게이션을 수행할 때 사용한다.
- 사용법
this.$router.push('/new-page');