RouterLink와 router.push()
269
작성한 질문수 2
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
어떨 때 RouterLink를 사용하고, 어떨 때 router.push를 사용해야하나요??
두 개의 기능이 똑같아보이는데, 404에서는 RouterLink를 사용하신 이유가 궁금합니다
답변 2
0
안녕하세요. AI 인턴의 답변과 마찬가지로
RouterLink는 <a>태그로 렌더링됩니다. 그리고
router.push()는 자바스크립트로 동작하기에 사전에 특정 비즈니스 로직을 처리할 수 있습니다.
추가로 RouterLink 사용시 <a>태그로 렌더링이 되었을 때 검색엔진 봇은 <a> 태그의 href 속성을 참고하여 웹 사이트 주소를 수집하기에 SEO에 더 유리합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
질문하신 RouterLink와 router.push()에 관하여 설명드리겠습니다.
RouterLink는 주로 Vue.js 템플릿에서 사용하며, 사용자가 링크를 클릭할 때 지정된 경로로 이동하게 합니다. 이는 렌더링된 HTML에서는 <a> 태그로 변환되어 사용자가 링크를 클릭했을 때 지정된 페이지로의 라우팅을 처리합니다. RouterLink는 선언적 네비게이션을 지원합니다.
반면에, router.push()는 프로그래매틱 네비게이션을 위해 사용됩니다. 즉, JavaScript 코드에서 조건에 따라 또는 특정 이벤트가 발생했을 때 동적으로 라우트를 변경할 때 사용됩니다. 예를 들어, 사용자의 입력을 검증한 후에 특정 경로로 이동해야 할 때 router.push() 메소드를 호출하여 처리할 수 있습니다.
404 페이지와 같은 경우에 RouterLink를 사용하는 이유는, 주로 사용자가 잘못된 URL에 접근했을 때 보여주는 정적인 페이지인 경우가 많기 때문입니다. 사용자에게 다른 페이지로의 링크를 제공하여 클릭만으로 손쉽게 네비게이션할 수 있도록 선언적 방식을 사용하는 것이 자연스럽습니다. 또한, RouterLink를 사용하면 SPA의 성능 이점을 유지하면서 페이지를 리로드하지 않고도 라우트를 변경할 수 있습니다.
결론적으로, 사용자의 인터랙션에 따라 동적으로 라우트를 변경해야 하는 경우 router.push()를 사용하고, 링크를 통한 선언적 라우팅이 필요한 경우 RouterLink를 사용하는 것이 일반적인 사용법입니다.
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
38
2
강의듣다가 헷갈려서 질문드립니다.
0
33
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
32
2
라우터 인스톨 후 실행안됨
1
49
2
코드 자동 포매팅 질문
0
68
2
필터 watchEffect 질문입니다.
0
52
1
json-server 오류가 다른게 뜨네요
0
113
1
미리보기가 안됩니당...
0
69
2
unplugin-vue-components
0
81
2
TypeError 질문
0
52
1
v-model="show" :show="show" 같이 사용?
1
57
1
hash 모드 배포의 필요성?
0
61
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
64
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
71
2
중첩된 컴포넌트 문제
0
75
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
329
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
123
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
169
2