Vue 라우터

Vue Router에 대해

Vue Router 설치

뷰 프로젝트가 있는 폴더를 열고

vue add router

커맨드를 입력하고 히스토리 사용 여부를 선택하자.

Vue Router 기초

기본으로 제공되는 Vue 페이지에 들어가면 상단에 'Home | About' 이라는 문구가 보일 것이다.

이제 프로젝터 폴더 안의 src/router/index.js 파일을 열어보자.

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',

    component: () =>
      import( '../views/About.vue'),
  }
];

이러한 코드가 보일 것이다.

각각 설명하자면,

path라는 값은 웹에서 이동했을 때 웹페이지 뒤에 붙는 주소이다.

name은 라우터의 이름 값이다.

component는 라우터가 어떠한 파일로 이동하는지 선택한다.

component는 위 코드에서 볼 수 있듯, 파일 상단에서 임포트 할 수도 있고, 아니면 따로 임포트 함수를 쓸 수도 있다.

src 폴더의 App.vue 파일로 가보자.

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

이러한 코드가 보일 것이다. router-link 태그는 클릭했을때 웹의 특정주소로 가게 해준다.

그 밑의 <router-view/>라는 태그는 라우터의 해당 컴포넌트를 띄어주는 역할을 한다.

Router 컴포넌트 추가

예시로 Contact라는 컴포넌트를 추가해보자.

src/views 디렉토리로 가서 Contact.vue 라는 파일을 하나 생성하자.

<template>
  <div>
    <h1>This is the Contact Page</h1>
  </div>
</template>

여기서 template 이란 태그가 낯설텐데 template태그는 간단히 말하자면 Vue에서 Html 문법과 Js 함수식을 사용 할수 있게 해주는 역할을 한다고 한다.

위와 같이 파일을 생성 후 index.js로 가서 아래와 같이 임포트 해주자.

import Contact from '../views/Contact.vue'

그 뒤 routes 배열에 object를 하나 생성하자.

  {
    path: '/contact',
    name: 'Contact',
    component: Contact,
  },

생성후 App.vue로 가서 아래 구문을 타 router-link 태그밑에 추가해주자.

<router-link to="/contact">Contact</router-link>

로컬호스팅 서버로 들어가면 Contact라는 메뉴가 추가 되었고 클릭시 /contact로 이동하는 것을 볼 수 있다.

비동기 컴포넌트

비동기 컴포넌트(Lazy Load)란 페이지 방문시 컴포넌트가 로딩되는 방식이다.

기본적으로 Vue로 만든 프로그램은 App.js에 모든 컴포넌트들을 포함해 한번에 모두 로드한다.(이는 개발자모드에서 네트워크 메뉴로 들어갔을 떄 확인가능하다.) 이는 페이지 전환이 빠른 장점이 있지만 처음 들어갔을 때 로딩 시간이 지나치게 오래 걸릴 수도 있다. 이 때문에 컴포넌트의 크기가 지나치게 크면 문제가 생길수 있기 때문에 비동기 컴포넌트 방식을 사용하는 것이다.

위에서 임포트 방식이 두가지 있다고 했는데, 두번째방법으로 임포트 하는 것이 비동기 컴포넌트이다.

    component: () =>
      import( '../views/About.vue'),

상단에서 불러오는 방식으로 처리한 컴포넌트들은 메뉴를 클릭해도 따로 로드 되진 않지만 이처럼 임포트하면 About 메뉴를 클릭시 네트워크 항목에서 about 파일이 로딩되는 것을 볼 수 있다.