vue-router 설치 / vue -router 추가 및 라우터 예제

vue-router 설치 / vue-router 추가 및 라우터 예제

 

 

이번 시간에는 라우터에에 대해서 알아보고자 한다. 사용자가 '/list' 또는 '/detail' 등 서브페이지에 접근하려면 router를 통해 페이지를 연결할 수 있다. 관리자가 티스토리 블로그에서 '블로그 관리'로 들어갈 때 https://jiurinie.tistory.com/manage의 '/manage' 경로와 같다. 물론 중간에 로그인 인증이 껴있긴 하지만 권한이 주어졌을때는 바로 관리 페이지로 이동한다. 이와 같이 페이지 이동을 위한 vue-router를 설치하고 vue에서 제공하는 기본 router를 추가하여 라우터가 어떻게 사용되는지에 대해서 알아보자. 

• 기본 프로젝트 생성

> vue create vue-router-sample

[Windows] Vue.js 설치 및 Vue 프로젝트 생성

기본 프로젝트 생성 후 Open Folder를 이용해 생성된 vue-rotuer-sample 프로젝트 폴더로 이동한다.

 

• vue-router 설치

> npm install vue-router@4

vue 버전이 업그레이드 되면서 앞으로 vue-router 설치 문법이 조금씩 다를 수 있는데 아래 링크에서 확인이 가능하다.

Installation | Vue Router

 

• vue 샘플 라우터 추가

vue에서는 기본적으로 샘플 라우터를 제공한다. 처음부터 라우터를 전부 타이핑하여 만들 수도 있고 vue에서 제공하는 샘플 라우터를 이용하여 생성 후 본인에 맞게 수정 및 추가하여 사용할 수도 있다. 

> vue add router

 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.? Still proceed? (y/N)

router 추가 시 위와 같은 경고가 출력될 수 있는데 이는 router 설치 후 package.json에 추가 된 router 라이브러리 변경을 git에 commit 하지 않아 발생하는것이니 y를  눌러 무시하고 진행해도 된다. vue는 프로젝트 생성시 자동으로 git을 init하여 파일을 추적한다.

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

history 모드 라우터를 만드냐고 묻는다. 아래에서 설명할 내용이니 일단 y를 눌러 라우팅 추가를 마무리한다.

라우터 추가 전과 후 비교

 

샘플 라우터 추가 시 router 디렉토리의 index.js, views 디렉토리의 AboutView.vue, HomeView.vue가 추가된 것을 확인할 수 있다. 

> npm run serve

서버 기동 시 상단에 Home과 About으로 분리되어 페이지를 이동할 수 있는 버튼이 생겼다.

 

• router/index.js

라우터 설정 및 path 와 component를 연결한다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    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/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

라우터 설정파일에서 알아둬야 할 것이 크게 두가지가 있는데 페이지 로드 방식과 라우팅 모드이다.

첫번째로 페이지 로드 방식인데 const로 선언된 routes 변수에는 두개의 페이지 경로가 담기는데 하나는 home과 다른 하나는 about이다. 두개의 페이지는 라우터를 이용한 페이지 이동을 할 수 있다는 점에서 동일한 기능을 하지만 그 안에서 수행하는 방식이 다르다. HomeView의 경우에는 상단에 이미 import 되어 있다. HomeView는 최초로 페이지 접속할 때 (개발자 도구 -> Network -> app.js) Response에 webpack으로 빌드된 결과물이 존재한다. 그러나 about 같은 경우에는 '코드 스플릿팅'이 되어 있어 해당 페이지로 이동할 때 AboutView가 빌드되어 보여진다. 실제로 운영하는 프로젝트같은 경우에는 페이지가 무수히 많을 것이다. SPA(Single Page Application) 특성 상 모든 페이지를 처음에 빌드하면 많은 시간을 소요하므로 '코드 스플리팅'을 통한 Lazy Loading이 필요한 페이지가 존재하게 된다.

두번째로는 라우터 모드로는 Hash, HTML5(History), Memory 세가지 모드가 있는데 각각 선언의 방식이 다르다. 위에서 라우터를 추가할 때 우리는 History Mode 라우터를 선택하였다.

Hash Mode : 내부적으로 전달되는 URL 앞에 해시 문자(#)를 사용한다(http://jiurinie.tistory.com/#). URL 호출 시 서버로 전송되지 않으므로 서버에서 특별한 처리가 필요하지 않는다. 그러나 SEO에서는 나쁜 영향을 끼친다고 한다.

HTML5 Mode(History Mode) : URL에 #이 나타나지 않고 정상적인 URL로 보인다. Vue 특성 상 서버 없이 단일 페이지 클라이언트 앱이므로 사용자가 브라우저에서 주소 타이핑(https://jiurinie.tistory.com/about)으로 접속 시 404 오류가 발생한다. 실제 운영하는 서버에 서브 페이지로 접근할 경우 index.html로 접근할 수 있도록 대체 경로를 추가하여 이 오류를 해결한다.

Memory Mode : 실제 브라우저 환경을 대상으로 가정하지 않기 때문에 추천되지 않는다.

더 자세한 사항과 History Mode에서 404 오류를 대체하는 방법은 아래 페이지에 기술되어 있으니 참고하길 바란다.

Different History modes | Vue Router

 

• App.vue

App.vue 파일의 template 내부를 보면 이전과 다르게 라우트 링크로 된 버튼이 되어 있고 연결할 수 있다. to 속성을 이용하여 index.js 라우트의 path 속성 값과 동일하게 설정하여 연결할 수 있다.

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

...

 

• /views/HomeView.vue, /views/AboutView.vue

<!-- Home View -->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
...


<!-- About View -->
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

 

• main.js

생성한 라우터를 main.js에 등록하고 import한다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

createApp(App).use(router).mount('#app')

 

이렇게 Vue에서 제공하는 샘플 라우터를 추가해보고 페이지 로드 방식과 라우팅 모드에 대해서 알아보았다. 자세한 라우터 옵션이나 에러페이지 전환 등 은 다음 시간에 알아보도록 한다.