[Vue.js] Router(라우터)에 대해서 알아보자.

 

 

Vue Router란 Vue.js 애플리케이션에서 사용하는 공식 라우팅 라이브러리입니다. 이 라이브러리를 사용하면 SPA(Single Page Application)에서 페이지간 전환을 스무스하고 쉽게 구현할 수 있습니다. 

 

 

Vue Router는 라우트를 정의하고, 각 라우트에 맞는 컴포넌트를 매핑하며, 라우트 간 전환을 처리하는 라우팅 시스템을 제공합니다. 이를 통해 사용자가 애플리케이션에서 다른 페이지로 이동할 때마다 새로운 페이지를 로드하지 않고도 페이지간 전환을 새로고침 없이 부드럽게 처리할 수 있습니다. 

 

예를들어 사용자가 /about이라는 페이지를 URL로 요청하면 /about 페이지를 보여주도록 컴포넌트를 '지정'하는 것을 라우트 정의라고 합니다. 이 라우터 정의 후 사용자의 URL 요청에 맞는 컴포넌트를 연결해주고 화면 상에 띄워주도록 하는 것이 라우터의 역할입니다. 

 

먼저 라우터 설치부터 시작하도록 합시다. 

 

 

1. 라우터 라이브러리 설치

  npm install vue-router	//npm을 이용한 다운로드
  yarn add vue-router		//yarn을 이용한 다운로드

npm또는 yarn을 사용해서 라우터를 설치할 수 있습니다. 위 명령어 중 하나를 선택해서 terminal에 입력하여 라우터 라이브러리를 다운받습니다. 

 

 

(main.js)

import router from './router'
createApp(App).use(router).mount('#app')

설치가 완료되면 main.js 파일을 열어서 위의 코드를 입력합니다. 위 코드는 라우터를 vue전역에서 사용할 것이다 라고 정의하는 것입니다. 

 

 

(router.js)

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

const routes = [
  {
    path: "/경로",
    component: //import해온 컴포넌트,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

이후 router.js라는 파일을 생성해서 위의 코드를 입력합니다. 여기서 중요한 것은 라우트를 설정하는 부분인 path와 component 부분입니다.

 

 

2. 라우터 정의 & 매핑

(router.js)

import About from './components/About.vue';

const routes = [
  {
    path: '/about',		// 라우터 정의
    component: About,		// 라우터 매핑
  }
];

위 코드에서 path를 통해서 /about 라우터를 정의했고, 만약 누군가가 /about 라는 페이지로 접속을 하면 About 컴포넌트를 보여주도록 라우터를 매핑시킨 것입니다. 이렇게 라우터 정의와 매핑이 성공적으로 이루어졌다면. 사용자가 /about 페이지로 URL 접속을 한다면 

About 페이지가 화면상에 등장할 것입니다. 여기까지가 라우터의 기본 기능입니다. 

 

 

3. 페이지 이동링크 설정 & 보여주기

만약 사용자가 /about 라우터로 이동하도록 하기 위해서 HTML 상에서 <router-link> 태그를 사용해야 합니다. 

<router-link to="/about">이동하기</router-link>

<router-link> 태그는 <a>태그로 인식이 됩니다. 따라서 화면상에서 해당 태그에 마우스를 올리면 마우스의 모양이 클릭할 수 있는 아이콘으로 변경됩니다. 마찬가지로 Css에서 <a>태그에 스타일링을 적용하면 <router-link> 태그에 스타일링이 적용됩니다. 

 

 

<router-link>태그를 사용해서 페이지 경로를 설정했다면 사용자에게 해당 경로의 페이지를 보여주기 위해서 <router-view> 태그를 사용해야 합니다. 

<router-view"></router-view>

위 코드를 입력하면 <router-link> 태그로 설정한 페이지가 화면상에 등장하게 됩니다.