[Udemy Vue 완벽가이드 Section13] 168. 라우팅 설정

# vue-router

 

## vue-router 설치

라우팅 패키지 설치를 위해 먼저, ctrl + c로 현재 실행중인 개발 서버를 종료시켜준다.

그리고 npm install --save vue-router를 실행하는데 이는 Vue팀이 만든 공식 패키지이다.

(vue-router뒤에 @next를 입력해서 최신 버전을 다운로드할 수 있다.)

npm install --save vue-router@next

 

Vue 프로젝트에 추가해서 라우팅 기능을 사용할 수 있도록 하는 패키지.

 

해당 패키지 설치가 끝나면 npm run serve를 통해 개발 서버를 재시작하자.

이제 애플리케이션에 라우팅을 추가할 수 있다.

 

## 라우팅 추가

라우팅을 추가한다는 것은 무슨 뜻일까?

main.js로 가보자.

메인 Vue앱, 바로 이 앱 하나를 생성했던 곳이다.

이 앱에 방금 설치한 라우터를 등록해볼텐데, 이 때 중요한 것은 본 프로젝트에서 필요한 라우트 설정이다.

우리가 지원하고자 하는 여러 URL이 여기에 해당한다.

 

1/ vue-router 패키지로부터 createRouter함수 import

먼저 vue-router, 방금 설치한 패키지로부터 import할 것이 있다. → 바로, createRouter라는 함수.

import { createRouter } from 'vue-router';

 

2/ createRouter함수를 통해 Vue라우터 생성

createApp을 통해 Vue 앱을 생성했고, createRouter를 통해 Vue 라우터를 생성했다.

라우터를 생성하려면 새로운 router 상수를 생성해보자. 그리고 createRouter를 호출하여 해당 상수의 결과값을 저장한다.

import { createRouter } from 'vue-router';

const router = createRouter({});

 

3/ createRouter함수 구성

이제 createRouter함수를 구성해줘야하는데, 여기에는 URL 등을 설정할 수 있다.

라우터 생성을 위해 JS객체를 입력하는데 해당 객체에는 두 가지 중요한 옵션을 설정할 수 있다.

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
  ],
});

 

 1) routes 옵션

중요한 옵션 중 하나는 바로 routes.

여기서는 모든 라우트이자 경로, 즉 우리가 지원하고자 하는 여러 URL을 등록한다.

보통 배열이 들어가는데, 대부분의 경우 앱에서 하나 이상의 라우트를 지원하고자 하기 때문.

지원하려는 라우트가 하나라면 애초에 라우터가 필요하지도 않겠지.

 

여기서는 어떤 URL에 대해 어떤 Vue 컴포넌트가 로드되었는지를 알리는데 바로 이것이 우리의 궁극적인 목적이다.

'..도메인/teams'인 경우에는 'Teams컴포넌트'가, '..도메인/users'인 경우에는 'Users컴포넌트'가 표시되도록 하는 것.

 

 2) history 옵션

설정해야하는 또 다른 옵션이 있다.

바로, history 옵션. 이 옵션을 통해서 라우터에게 본 앱의 라우팅 히스토리 관리방법을 알려줄 수 있다.

사용자가 다른 곳을 클릭하면 다른 페이지로 넘어가고 해당 페이지가 브라우징 히스토리에 등록되도록 하는 방식을 설정할 수 있다.

사용자가 뒤로가기 버튼을 누를 때는 히스토리를 통해 라우터가 이전 페이지를 알 수 있다.

 

history 옵션에는 두 가지가 있다. 

먼저 'vue-router'로부터 또 다른 함수를 불러오도록 하자. 바로 'createWebHistory' 함수이다.

이 함수를 history옵션에서 호출해보자.

 

이전에는 브라우저에서 JS를 이용하여 사용자가 어느 페이지에 있고 어디서 왔는지 브라우저의 메모리를 조작하는 것이 항상 가능하지는 않았다.

따라서 이전에는 라우터가 이 동작을 에뮬레이트(emulate)해야 했다.

내장 브라우저 히스토리를 사용하지도 않았다. 

 

하지만 지난 몇년 전부터 createWebHistory함수를 호출하여 라우터에게 사용자가 어디서부터 왔는지에 대한 정보 등을 알려 주는 데에 아무 문제가 없어서 브라우저 내장 메커니즘을 사용하게 되었다.

이로 인해 지금처럼 라우터에게 내장 브라우저 지원 기능을 사용하라고 지정하면 되는 것이다.

history설정은 이렇게 끝났고, 라우터의 핵심인 routes설정에 집중해보자.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.