1. 라우터의 역할
기존 HTML로 웹 페이지를 제작할 때, 특정 주소로 접속하거나 특정 링크를 클릭하면 해당 페이지 화면으로 전환되는것을 이미 잘 알고 있을 것입니다.
Vue나 React같은 SPA(single page application)은 페이지로 이동하는것이 아니라, 화면에 읽어놓은 페이지를 라우터를 이용해 새롭게 갱신 하게 됩니다. 이것을 라우팅이라고 합니다.
2. 라우터 설치방법
터미널에서 다음 명령어를 입력합니다.
vue add router설치과정에서 Use history mode for router? 라고 히스토리모드를 사용할것이냐고 물어보는데 Y(es)를 눌러 계속 진행합니다.
이 방식으로 설치하면 라우터가 적용된 샘플 템플릿 형식으로 파일이 만들어지는데,
샘플페이지 없이 실제로 사용할때는 아래 명령어를 통해 최신버전을 다운받아 사용하는 방법도 있습니다.
(뒤에 @4는 라우터 버전을 의미합니다. 이 글을 작성중인 현재는 4버전이 최신)
npm install vue-router@4
※ vue add router 명령을 이용해 자동으로 세팅이 되어있을 경우엔 아래 내용이 이미 작성되어있으니,
새로 작성할 필요 없이 이러한 역할을 한다 정도로 이해하고 넘어가면 됩니다.
3. 라우터 기본 세팅과 사용방법
npm install vue-router@4 명령을 통해 라우터를 설치하고나서 사용하기위해 몇가지 설정해줘야 하는 것들이 있습니다.
(1) 루트 폴더에 있는 main.js로 이동하여 기본 세팅을 합니다.
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <-- 설치한 라우터를 가져와서
createApp(App).use(router).mount('#app') // <-- 사용할 것이라고 선언. use(router) 추가
(2) 라우터 관련 내용을 담을 js파일을 생성합니다.
기본세팅으로 router 폴더 안에 index.js파일로 생성되어있지만, 필요하다면 원하는 이름으로 변경도 가능합니다.
(변경하였다면 (1) 단계에서 import 한곳의 위치도 바꿔줘야 합니다)
파일의 내용은 아래 내용을 그대로 복사하여 붙여넣은후 필요에 따라 수정하여 사용하는것이 편리합니다.
// @/router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;routes 내부에 있는 { path, name, component } 항목만 그대로 복사해서 붙여넣는 식으로 반복하여 사용하면 되는데,
위 내용은 누군가가 /(루트 페이지=홈)으로 접속하면 HomeView라는 컴포넌트를 보여주세요 라는 의미입니다.
마찬가지로 아래는 /about 으로 누군가 접속하면 AboutView.vue라는 컴포넌트를 보여주세요 라는 뜻이구요.
상단에 inport 해서 아래쪽에서 가져온 컴포넌트의 이름을 지정하는 방식과,
컴포넌트에서 직접 함수형식으로 import 하는 방식이 있는데
후자는 처음 로딩시 읽어들이지 않아 첫 로딩시간을 짧게 할 수 있으며, 경로에 따라 파일이 별도로 분할되어 생성됩니다.
이 방식은 해당 페이지로 이동할때 문서를 읽어들이기 때문에 페이지 이동시 지연시간이 발생합니다.
views 페이지 샘플 코드
// views/AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>// views/HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
(3) 위에서 라우트 설정이 다 되었다면 라우터로 설정한 컴포넌트를 보여줄 위치를 지정해야 하는데,
원하는 장소에 <router-view> </ router-view>로 지정해주면 됩니다..
// app.vue
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view /> <!-- 실제 페이지가 보여질 위치 -->
</template>
이제 유저가 해당 주소로 이동할 수 있는 버튼을 만들어 줘야 합니다.
<router-link to="주소"> 보여질 이름 </router-link>으로 작성하면 되는데, 기존 HTML의 a href 태그를 사용하는것과 동일한 형식입니다. (나중에 빌드하게되면 위 부분이 a 태그로 변환됩니다)