Vue Router

 

 이번 시간에는 Vue Router에 대해 학습합니다. 사용자가 접속한 주소에 따라 페이지가 달라지는 것을 라우팅이라고 합니다. 이번 시간에는 라우팅이 무엇인지 파악하고, Vue에서 라우팅 처리를 위해 사용하는 플러그인 vue-router에 대한 설치 및 사용법에 대해 알아봅니다. 또한 Vue CLI의 prefetch 기능에 대해 이해하고 컴포넌트 로딩 시점을 설계하는 방법도 익혀봅니다.

 

1. 라우팅이란?

라우팅이란 사용자가 접속한 주소에 따라 페이지(컴포넌트)가 전환되는 것을 의미합니다.

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. vue 프로젝트 내부에서는 미리 url를 정의하고, 각 주소마다 vue 페이지를 연결해 놓습니다.

Vue는 vue에서 제공하는 공식 플러그인 vue-router를 이용해 라우팅을 쉽게 구현할 수 있습니다.

• 싱글 페이지 애플리케이션: 페이지 이동 시 웹 페이지를 요청해서 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 화면만 갱신하는 것

라우팅 예시. 메뉴에 따라 페이지 전환 

 

---

2. Vue-Router 설치

그러면 이제 vue-router를 설치해봅시다. vue-router를 설치하는 방법은 여러 개 존재합니다. 이는 공식 문서 링크를 참고하였습니다.

2-1. CDN 방식

• 주의! 아래 CDN 추가 전에 vue 라이브러리를 추가해야 합니다.

<script src="https://unpkg.com/vue-router/dist/vue-router.js">

2-2. NPM 방식

npm install vue-router

2-3. Vue CLI

Vue CLI를 사용하고 있는 경우는 Vue 라우터를 플러그인으로 설치가 가능합니다. 여기서는 CLI를 이용해서 설치해봅니다.

vue add router

history mode는 URL의 해쉬 값 제거 속성으로 사용 여부 y(사용)를 사용하는 경우 url 경로가 #이 아닌 / 로 변경된다.

y를 입력합니다. 

설치를 완료하면 src 폴더 안에 router와 views 폴더와 파일이 자동으로 생성됩니다.

자동 생성된 폴더&파일 

http://localhost:8080/ 에 접속하면 아래 두 메뉴가 존재합니다. home, about 링크를 클릭하면 화면이 전환되는 것을 확인할 수 있습니다.

---

3. Vue 파일 구조

vue-router 설치를 통해 새로 추가된 파일들을 살펴보겠습니다.

3-1. App.vue

src/App.vue 파일을 들어가 보면 아래와 같은 부분이 존재합니다. router-link to=""를 이용하여 화면 이동이 가능합니다. 는 아래 index.js에서 정의할 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려집니다.

• App.vue: 최상위 컴포넌트

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

3-1-1. router-link

화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 그게 바로 <router-link>입니다.

<router-link to="이동할 URL"></router-link>

실제 코드 예시는 다음과 같습니다.

 <div id="nav">
      <router-link to="/about">About</router-link>
    </div>

위 코드를 실행하면 화면에서는 <a> 태그로 변형돼서 나옵니다. 따라서 <a> 태그를 클릭하면/about URL로 이동합니다. 아래 그림에서 볼 수 있듯이 <a> 태그로 변형되어 나타나게 됩니다.

3-1-2. router-view

브라우저의 주소 창에서 URL이 변경되면, 아래에서 정의할 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려집니다. 이때 뿌려지는 지점이 템플릿의 <router-view>입니다.

  <router-view/>    <!-- Home 또는 About 컴포넌트 -->

아래에서 정의할 라우팅 옵션 기준으로 /는 Home 컴포넌트를 /about은 About 컴포넌트를 화면에 표시합니다.

3-2. index.js

위에서 말했듯이 우리가 개발한 페이지의 화면이 어떻게 브라우저의 주소가 바뀔 때마다 바뀌어 보이도록 설정되는 것일까요? src/router/index.js 파일에서 path에 따른 컴포넌트를 정의합니다.

3-2-1. 뷰 라우트 정의

우선 routes 배열에 등록된 라우트를 살펴봅시다. 두 라우트가 존재합니다. Home 컴포넌트와 About 컴포넌트에 대한 라우트입니다. 아래 코드를 보면 두 라우트 정의 방식이 약간 차이가 있습니다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

• path : 브라우저에서 접속하는 url 주소를 정의합니다.
• component: 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트와 연결하고 해당 파일을 실행시킵니다.
• 우선 Home 라우트는 아래 코드와 같이 임포트 부분이 src/views/Home.vue 파일을 참조합니다. 이렇게 임포트를 하고 routes 안에 path와 맵핑을 해주면 url 주소에 따라 원하는 뷰 파일을 보여줄 수 있습니다.

import Home from '../views/Home.vue'

About 라우트는 Home과 다르게 component부분이 다릅니다./* webpackChunkName: "about" */ 주석은 라우트 레벨에서 코드를 분할한 후 별도의 chunk 파일을 생성하고, 실제 이 라우트를 방문했을 때 리소스를 로드하게 됩니다. 이를 lazy-load(지연 로드)라고 합니다.

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

두 라우터의 큰 차이점은 Home라우트는 사용자가 해당 path에 접근을 하지 않아도 vue 파일을 import 하는 것이고 About 라우트는 path에 접근하기 전까지는 vue 파일에 대한 import가 일어나지 않습니다.

lazy-load 관련해서는 다음 포스팅에 업로드하겠습니다.

3-2-2. 뷰 라우터 옵션

대부분의 SPA 앱에서는 아래와 같이 2개 옵션을 필수로 지정합니다.

• routes : 라우팅 할 URL과 컴포넌트 값 지정
• mode : URL의 해쉬 값 제거 속성. 위에 Vue CLI에서 설치 시, history 모드를 사용했습니다. 이는 history모드를 사용할 때 http://localhost:8080/about로 접근합니다. 만약 history 모드 부분을 지우면 http://localhost:8080/#/about와 같이 접근이 됩니다.

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

 

3-3. main.js

/src/main.js 파일을 살펴보겠습니다. main.js 는 vue 인스턴스를 생성해주는 역할을 합니다.

import { createApp } from 'vue'
import App from './App.vue'         // 최상위 컴포넌트 
import router from './router'       // router 폴더에 있는 index.js   

// 1. createApp: 최상위 컴포넌트 App.vue로 app를 생성
// 2. use: App.vue에서 router를 사용할 수 있게 추가 
// 3. mount: public/index.html에 있는 id="app"인 html과 마운트 
createApp(App).use(router).mount('#app')

 

 

 

다음 시간에는 Lazy Load에 대해 알아보고 적용하는 방법에 대해서 알아보고 실습해 보겠습니다.