vue-router란?
vue-router에서 router 라는 것은 일반적으로 화면이 전환될 때 전환되는 행위를 router라고 한다. 최근 개발되는 웹애플리케이션은 SPA 구조이다.
SPA
SPA(Single Page Application) 는 여러 화면을 하나의 페이지 안에서 제공하면서도 화면을 별도로 로딩하지 않는다. 즉 해당화면에 대한 정보를 미리 갖고 있다가 해당 화면으로 넘어갈 때 서버에 요청하는 것이 아니라 클라이언트 내부적으로 라우터를 이용하여 서버에서 어떤 데이터를 받아 오지 않고도 화면을 바로 매끄럽게 전환 해주는 것이다. 화면마다 고유의 식별자를 기반으로 화면을 렌더링해야 하고, 고유 식별자로 사용하기에 가장 적절한 정보가 바로 URI(Uniform Resource Identifier)이다.
Vue.js 애플리케이션에서 사용자가 요청한 URI 경로에 따라 각각 다른 화면이 렌더링 되도록 하려면 직접 코드로 구현해 사용할 수도 있지만 대부분 잘 만들어진 라이브러리를 사용한다. Vue.js에서는 vue-router라는 것을 이용하면 된다.
vue-router는 vue.js의 공식 라우터 라이브러리며, Vue.js의 핵심 요소와 깊이 통합되어 SPA를 손쉽게 만들 수 있도록 도와준다.
- 중첩된 경로, 뷰를 매핑할 수 있다.
- 컴포넌트 기반의 라우팅을 구현할 수 있다.
- Vue.js의 전환 효과(Transition)를 적용할 수 있다.
- 하스토리 모드와 해시 모드를 모두 사용할 수 있다.
- 쿼리스트링, 파라미터, 와일드 카드를 사용하여 라우팅을 구현할 수 있다.
원형섭, 『Quick Start Vue.js』, 루비페이퍼(2017)
CAPTAIN PANGYO, 『누구나 다루기 쉬운 Vue.js 프론트 개발 - 3시간 안에 배우기』, 인프런(2017)