Vue.js - 뷰 라우터, 네스티드 라우터, 네임드 뷰

Yuri Lee·2020년 9월 22일
0

Vue.js

목록 보기
4/12

라우팅이란?
라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야 함 😁
라우팅이란 웹 페이지 간의 이동방법으로 싱글 페이지 애플리케이션에서 많이 사용한다 (싱글 페이지 패턴 : 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴)

대표적인 라우팅 라이브러리: navigo.js .. etc

뷰 라우터
뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.

<router-link to="url값"> : 페이지 이동 태그, 화면에서는 <a> 로 표시되며 클릭하면 to에 지정한 url로 이동
<router-view> : 페이지 표시 태그 

네스티드 라우터
페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낸다. 상위컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조! 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다. -> 네임드 뷰

네임드 뷰
특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.


[Reference]

Do it Vue.js 입문(이지스퍼블리싱)

profile
Step by step goes a long way ✨

0개의 댓글