[Vue] Vue Router 개념 및 설치

- 개요

안녕하세요. 이번 시간에는 Vue Router에 대해 알아보겠습니다.

 

Router란 무엇일까요? 사전을 검색해보면 네트워크에서 데이터의 전달을 촉진하는 "중계 장치"라고 설명하고 있습니다.

위 그림과 같이 로그인 페이지와 메인 페이지가 있다면, 사용자에 요청에 맞는 페이지를 보여주는 중계 역할을 할 수 있는 기술은

Vue Router입니다.

 

 

Router와 항상 함께 묶어 사용되는 개념인 Route라는 용어도 있습니다.

 

Route를 사전에서는 "한 곳에서 다른 곳으로 가기 위해 따라가는 길(경로/루트)"라고 설명하고 있습니다.

 

위 그림을 보면 화살표가 route가 될 수 있습니다. 

 

두 개념을 혼돈하지 않으셔야 개발할 때와 커뮤니케이션할 때 좋습니다. (기억하세요!! :>)

 

- 설치

설치는 아래 공식 홈페이지 링크를 통해 원하는 방식으로 설치하시면 됩니다.

router.vuejs.org/kr/installation.html

설치 | Vue Router

 

- Route 설정

저는 vue-cli를 통해 프로젝트를 만들었기 때문에 기본적으로 Vue Router가 연결되어 있습니다.

 

우리가 생성한 component를 연결하는 route 설정 파일은 src/router/index.js 파일입니다. 

 

src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

//Vue와 VueRouter 연결
Vue.use(VueRouter);

//우리가 사용할 route 생성 및 설정
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'),
  },
];

//VueRouter에 route를 등록하고 설정한다.
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

//설정한 VueRouter 내보낸다.
export default router;

 

src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'; //VueRouter를 불러온다.
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router, //Vue 인스턴스에 연결
  store,
  render: (h) => h(App),
}).$mount('#app');

 

기본 소스코드 파일입니다. 우리가 앞으로 코딩해야 할 부분은 src/router/index.js 파일입니다.

 

간단하게 routes 소스코드를 설명하겠습니다. (사실 이 부분이 제일 중요합니다.)

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

//우리가 사용할 route 생성 및 설정
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 경로
name: Component 이름(호출할 때 사용됩니다.)
component : 해당 경로에 보이는 Component

 

여기서 중요한 부분은 Home Component와 About Component 방식이 다른 점입니다.

 

기본적으로 Vue.js는 싱글 페이지 애플리케이션입니다.

 

사이트가 로딩될 때 우리가 생성한 컴포넌트들을 모두 불러옵니다. 그리고 모두 불러온 컴포넌트들은 사용자 요청에 맞게 하나씩 렌더링 합니다.

 

이렇기 때문에 최초 사이트 접속 시 로딩 시간이 길어지게 되는 문제점이 있지만, 사이트를 한번 접속하고 나면 빠르게 다른 페이지를 접근할 수 있는 장점이 있습니다. 하지만 규모가 정말 크다면 문제가 있겠죠?? 그럼 둘 차이는 무엇일까요.

 

- 차이점

Home : 사이트를 최초 방문할 때 모든 컴포넌트를 가지고 오게 하는 방식

About : 사이트를 최초 방문과 상관없이 사이트 해당 경로에 접근했을 때 해당 컴포넌트를 가지고 오는 방식

 

두 컴포넌트는 이런 차이가 있습니다. 

 

이렇게 설정된 Home과 About은 어떻게 사용되는지 소스코드를 통해 확인해보겠습니다.

 

src/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>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

 

tamplate 태그 안에서 라우팅 역할을 해주는 기술은 <router-link>입니다. 이 부분에 대해서 자세한 설명은 다음 시간에 하겠습니다.

 

그리고 우리가 선택한 페이지에 컴포넌트를 렌더링 해주는 부분은 <router-view/>입니다. (나중에 왜 렌더링이 안되지 하면 이 부분이 빠져서입니다. ㅋㅋ 저도 종종... 실수를 해서요...)

 

실행 결과 화면

 

Home을 선택했을 때 화면에 Home 컴포넌트 페이지가 렌더링이 되고 About을 선택했을 때는 About 컴포넌트 페이지가 렌더링 되는 걸 확인할 수 있습니다.

 

이번 시간에는 간단한 개념과 설치하고 설정하는 법에 대해 알아봤습니다. 감사합니다.