Vue.js - Vue Router (개념 및 구현)

Vue.js는 그 자체로는 단순한 뷰 계층 라이브러리입니다.

 

그러므로 여러 페이지로 구성되고 복잡한 사용자 인터랙션을 갖는 애플리케이션 등을 개발할 경우에는 Vue.js만으로는 구현이 어려울 때가 있습니다.

공식 플러그인인 Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)을 비롯한 URL 이동이 필요한 동작을 간단히 구현할 수 있습니다.

 

---

1. Vue Router를 이용한 SPA

 

SPA란 최초에 HTML 페이지 하나를 로드한 다음, 그 이후로 사용자 인터랙션에 따라 Ajax로 정보를 받아오면서 동적으로 페이지를 업데이트하는 웹 어플리케이션을 말합니다.

일반적으로 웹 애플리케이션은 페이지 이동 시에 대상 URL을 서버에 요청해 전체 페이지에 해당하는 HTML 콘텐츠를 받아옵니다.

 

반면, SPA는 페이지 이동을 클라이언트에서 처리합니다.

페이지 이동 시 Ajax를 사용해 적시에 필요한 데이터를 받아와 뷰를 화면에 표시합니다.

전체 페이지에 해당하는 HTML을 모두 받아오는데 드는 오버헤드가 줄어들어 애플리케이션의 속도가 향상되며 매끄러운 사용자 경험을 제공할 수 있습니다.

 

SPA를 구현하려면 다음과 같은 사항을 고려해야 합니다.

① 클라이언트 사이드에서 히스토리를 관리하는 페이지 이동(라우팅 관리)

② 비동기로 데이터 받아오기

③ 뷰 렌더링

④ 모듈화된 코드 관리

 

라우터 혹은 라우팅 라이브러리라고 불리는 모듈이 이런 기능을 제공합니다.

라우팅 설정에 따라 URL별로 특정 컴포넌트를 선택적으로 표시하는 방법으로 페이지 이동을 구현할 수 있습니다.

 

---

2. Vue Router란 무엇인가?

 

Vue Router는 Vue.js 공식 플러그인으로 제공되는 라우팅 라이브러리로 SPA 개발에 사용됩니다.

 

Vue에서 SPA(Single Page Application)을 구현 시, 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인이 Vue Router입니다.

원래 사용자의 URI Request가 들어오면 서버 즉 백에든에서 Controller가 그 Request에 해당하는 Response로써 정적 파일(html, css, javascript ... )을 보내줍니다.

Vue Router는 프론트앤드에서 요청 URI에 따라 전체 새로운 돔을 변경하는 것이 아니라, 브라우져에서 변화가 있는 부분의 돔을 변경하는 방식입니다.

 

Vue Router는 기본적인 페이지 이동 기능 외에도 다음과 같은 고급 기능을 제공합니다.

① 중첩 라우팅

② 리다이렉션과 앨리어싱

③ HTML5 History API와 URL 해시를 이용한 히스토리 관리 (IE9에서는 자동으로 풀백)

④ 자동으로 CSS 클래스가 활성화되는 링크 기능

⑤ Vue.js 트랜지션 기능을 이용한 페이지 이동 트랜지션

⑥ 커스터마이즈된 스크롤링

 

---

3. 라우팅 구현하기

 

라우팅을 구현하려면 라우트와 라우터 생성자를 사용합니다.

 

라우트(route)란 URL과 뷰의 정보를 저장한 레코드를 말합니다.

어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보라고 생각하면 쉽습니다.

애플리케이션을 구성하는 페이지마다 라우트를 정의하고 사용할 라우트를 지정하면 해당 라우트가 연결된 페이지로 이동합니다.

 

예를들어, /emxaple 이라는 URL에 example 컴포넌트를 노출하도록 라우트를 정의하면 /example에 접근했을 때 이 라우트가 example 페이지가 표시되도록 하는 것입니다.

 

Vue Router의 라우트는 Vue.js의 컴포넌트 특정 URL에 대응시킨 객체 형태를 갖습니다.

이 객체를 라우터 생성자를 사용해 라우터를 초기화할 때 routes 옵션으로 설정합니다.

 

 

① 라우트 객체 생성 및 라우트 인스턴스 생성 : route>index.js

// 라우트 객체에 사용할 링크
import VueRouter from 'vue-router'
 
 
// 라우트 객체 생성
const routes = [
  ....
  ....
]

const router = new VueRouter({
  routes,
  mode: 'history',
  base: '/',
 
  ...
  ...
})

 

 

 

 

③ 라우터 인스턴스를 루트 Vue 인스턴스에 전달 : main.js

import router from '@/router'
 
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

 

④ 라우터에 사용될 path 작성 : route>index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
 
Vue.use(VueRouter);
 
const routes = [
  // ...
  {
  	path: 'test-vue-go',
  	name: 'testvuego',
 	component: () => import('@/views/test/TestVuego.vue'),
  	meta: { title: '테스트' }
  },
  {
	path: 'test-vue-component',
	name: 'testvuecomponent',
	component: () => import('@/views/test/TestVueComponent.vue'),
 	meta: { title: '컴포넌트 만들기' }
  }
]
/ ...

 

 

⑤ router-view 와 router-link : App.vue, TestVueGo.vue

 

라우터 정의와 Vue 인스턴스 생성이 끝났으면 라우팅이 동작할 HTML을 작성해야 합니다.

Vue 인스턴스가 마운트될 요소 외에도 라우트 정의에 사용된 컴포넌트를 실제로 반영시킬 요소가 있어야 합니다.

 

router-view 요소에 이 역할을 맡깁니다.

그러면 라우트에서 매핑된 컴포넌트가 <router-view> 부분에 랜더링이 됩니다.

링크를 표시해서 페이지 이동이 가능하게 하려면 router-link요소를 사용해 링크를 정의합니다.

 

정리하면,

<router-link to="URL 값"> : 페이지 이동 태그, 화면에서는 <a>로 표시되며 클릭하게되면 to 속성에 입력한 URL로 이동

<router-view /> : 페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 출력해주는 영역

 

 

- App.vue

<router-view /> 태그를 이용하여 페이지를 표시하고 있습니다.

<template>
  <div id="app">
    <router-view />
  </div>
</template>

 

 

- TestVueGo.vue

<router-link> 태그를 이용하여 클릭 시 /test/test-vue-component URL로 이동합니다.

<template>
  <div>
    <div>
        ...
      <router-link
        to="/test/test-vue-component"
        class="btn"
      >
        컴포넌트 만들기
      </router-link>
    </div>
  </div>
</template>

 

 

⑥ Vue Router 구현 결과

- /test/test-vue-go

 

 

 

- /test/test-vue-component

 

 

---