❗️ 참고: 이 글이 작성된 지 이미
서문
Vue 학습 정리가 거의 마무리되었으며, 이제는 다른 잡다한 지식을 보충할 예정입니다. 오늘은 Vue Router의 세 가지 구현 방식에 대해 설명하겠습니다.
프로젝트 전체 코드 보기 (이 프로젝트에는 Vue Plugin 등의 다른 Vue 테스트 코드도 포함되어 있습니다)
render 함수를 통한 구현
기본적인 아이디어는 render 함수가 주소창의 경로를 기반으로 컴포넌트 내용을 렌더링하는 것입니다. HTML5의 history.pushState 사용과 popstate 이벤트 감지를 결합하면 직접 주소 접근/브라우저 뒤로 가기 및 앞으로 가기/링크 클릭 이동 등의 라우팅 기능을 구현할 수 있습니다.
장점:
- 존재하지 않는 주소를 404.vue 페이지로 리다이렉트할 수 있습니다.
단점:
- HTML5의 history.pushState API를 지원하지 않는 브라우저에서는 폴리필을 사용할 수 없습니다.
- render 함수의 렌더링 결과를 캐시할 수 없습니다.
참고: 트랜지션 애니메이션 효과를 사용하는 경우, 루트 요소는 default.vue에 존재합니다. 코드 상의 차이점을 유의하세요.
component의 is 속성을 통한 구현
사실 원리는 위와 동일하지만, render 함수 대신 component를 사용합니다.
component에는 is 속성이 있어 어떤 템플릿을 로드할지 지정할 수 있습니다. 이 속성은 주소창의 경로를 기반으로 동적으로 설정할 수 있습니다.
장점:
- component에 keep-alive 속성을 추가하여 캐시할 수 있어 render 함수보다 효율적입니다.
단점:
- HTML5의 history.pushState API를 지원하지 않는 브라우저에서는 폴리필을 사용할 수 없습니다.
- 존재하지 않는 라우트 주소(예: 404 등)를 렌더링할 수 없습니다(따라서 이 데모에는 위와 같은 404.vue가 없습니다).
참고: 트랜지션 애니메이션 효과를 사용하는 경우, 루트 요소는 tpl.html에 존재합니다. 코드 상의 차이점을 유의하세요.
VueRouter 플러그인을 통한 구현
VueRouter는 공식 플러그인으로, 모든 요구 사항을 완벽하게 구현합니다.
장점:
- 필요한 모든 기능을 갖추고 있습니다.
단점:
- pushState를 폴리필하기 위해 경로 뒤에 #을 추가하여 라우팅 기능을 구현하지만, 실제로는 진정한 라우팅이 아닌 해시 값 변경에 불과합니다.
- EOF -
이 글의 최초 게시:
Vue에서 라우팅을 구현하는 세 가지 방법 - Xheldon Blog
블로거의 말:
저는 인생의 중요한 선택의 기로에 섰을 때, 누군가 최선의 방법을 알려주어 소중한 시간을 헛되이 보내지 않기를 바라곤 합니다. 그런 마음으로 저는 자주 블로그를 쓰며, 광활한 인터넷의 이 작은 구석에 제게는 단 한 번뿐인 인생 경험을 기록하여 도움이 필요한 분들에게 도움이 되기를 바랍니다.
