a태그와 router-link 그리고 router.push()

a태그

=> 화면 전환

=> 리소스 처음부터 끝까지 다시 호출.

 

router-link

=> 기존 리소스 그대로 사용하기 때문에 새로 불러오지 않고, 사용할 컴포넌트만 불러옴

=> <a> 태그 생성.

=> 선언적 방식. 클릭 시 url 로 이동만 한다.

 

📌 router.push는 router-link 를 클릭 할 때 내부적으로 호출되는 메소드

===> router-link를 클릭하면 router.push를 호출하는 것과 같다.

 

router.push()

=> 자바스크립트로 주소창만 변경해주고, 히스토리 쌓고, 컴포넌트만 변경한다.

=> 주소 추가하기 위해 onClick과 같은 이벤트 핸들러와 같이 사용된다.

=> <span>, <div> 등 어떤 태그에 이벤트를 발생시켜 주소를 추가해서 

=> window.history API와 비슷하게 동작한다.

=> <a>태그를 만들지 않기 때문에 검색엔진최적화(SEO) 불리하다.

=> 프로그래밍 방식. script 작성 시 각 라이프 사이클에서 특정 코드가 완료 된 후 페이지 이동이 필요하거나 params 와 같은 속성을 전달 받고 다시 특정 기능을 수행 후 다시 화면 전환이 필요 할 경우 사용할 수 있다.

 

 

 

* 퍼블리셔가 a태그로 작업을 해도

실제로 사용할 땐, button태그로 변경해서 이벤트 push를 해주거나, router-link로 변경해서 사용한다.