-
뷰 라우터JavaScript/Vue.js 2019. 2. 27. 19:02
뷰 라우터
라우팅이란 웹 페이지 간 이동 방법을 뜻한다.
라우팅은 싱글 페이지 애플리케이션1에서 주로 사용된다.
라우팅을 이용하면 화면 간 전환이 매끄러워진다.
페이지 이동을 라우팅으로 처리하면 매끄럽게 전환할 수 있고, 더 빠르게 화면을 조작할 수 있다.
뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다.
뷰 라우터를 이용해 뷰로 만들어진 페이지 간 자유롭게 이동할 수 있다.
뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 아래와 같다.
태그
설명
<router-link to = "URL 값">
페이지 이동 태그.
화면에서는 <a>로 표시되며, 클릭하면 to에 지정한 URL로 이동된다.
<router-view>
페이지 표시 태그.
변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다.
뷰 라우터를 이용해 예제를 작성해보자.
(뷰 라우터를 이용해 만든 예제이다.)
Q : $mount API가 무엇인가요?
A : $mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.
인스턴스를 생성할 때 el 속성을 정의하지 않더라도, 인스턴스 생성 후 $mount()를 할 경우 강제로 인스턴스를 화면에 붙일 수 있다.
뷰 라우터의 공식 문서는 모두 인스턴스 안에 el 속성을 정의하지 않고 $mount()를 활용해 붙이는 식으로 설명을 한다.
따라서 화면에 붙일 때에는 el 속성을 정의하기보다 $mount()를 활용하도록 하자.
tip. 라우터 URL의 해시 값(#)을 없애는 방법
뷰 라우터의 URL 형식은 해시 값을 사용한다. ex) http://index.html#/login
만약 이러한 해시 표현을 URL에서 하기 싫다면 다음과 같이 VueRouter 생성자에 mode 속성을 history로 정의하면 된다. ex) http://index.html/login
1234const router = new VueRouter({mode : 'history',...});네스티드 라우터
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 표현할 수 있다.
상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 아래와 같이 구성한다.
(네스티드 라우터의 구조)
위 그림처럼 네스티드 라우터를 이용하면 URL에 따라서 Library 컴포넌트의 하위 컴포넌트가 다르게 표시된다.
그럼 이제 위의 그림에 맞는 형식의 컴포넌트 구성을 작성해보자.
(네스티드 라우터 예제)위 예제에서 알 수 있는 네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌트에도 <router-view>가 있고, 하위 컴포넌트(Library)에도 <router-view>가 있다는 것이다.
그렇기 때문에 URL에 따라 하위 컴포넌트의 내용이 바뀌게 된다.
네스티드 컴포넌트의 관계도를 그려보면 아래와 같다.
참고!
코드를 작성하고 크롬으로 테스트를 진행할 경우 아래의 내용을 주의하자.
(URL에서 library경로를 입력할 때 맨 앞에 "file:///"을 작성해주지 않을 경우 아래와 같은 에러가 발생한다.)
(URL 주소에 맨 앞에 "file:///"를 적어주지 않은 경우)
파이어폭스 브라우저에선 아무런 문제가 없지만 크롬에선 위와 같은 문제가 발생한다.
그러니 주의해서 테스트하도록 하자.
네임드 뷰
네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표현하는 라우팅 방식이다.
네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 구조이지만 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트 구조를 갖는다.
네임드 뷰 구조의 예제를 작성해보자.
(위의 예제 코드를 실행한 모습)
네임드 뷰를 활용하면 해당 URL에 맞추어 여러 개의 컴포넌트를 한 번에 표시할 수 있다.
해당 내용은 'Do it! Vue.js 입문'을 참고하여 공부한 내용을 정리한 글입니다.
- 페이지를 이동할 때 마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아닌 미리 해당 페이지들을 받아놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴 [본문으로]
