Notice
Recent Posts
- Today
- Total
빵 입니다.
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로 변경해서 사용한다.
'프론트엔드 > Vue' 카테고리의 다른 글
[Vue warn]: inject() can only be used inside setup() or functional components. (0) | 2024.02.26 |
---|---|
Vue3와 Vuetify3 (0) | 2024.01.29 |
vue-router 변경 감지 (동적 라우팅의 문제점) (0) | 2022.12.12 |
template 과 slot (0) | 2022.09.26 |
setup 안에서 ref를 콘솔로 찍으면 항상 null이 찍힌다. (0) | 2022.08.25 |
Comments