[Vue.js] Vue-router

 ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다.

 

Vue Router

SPA(Single Page Application)은 하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공해줄 수 있는 애플리케이션을 말한다. Vue Router는 URL 경로와 컴포넌트를 매핑한다. 사용자는 특정 경로로 이동하면 Vue Router가 해당 경로에 맞는 컴포넌트를 찾아 렌더링한다.

 

Vue Router 기본 사용법

npm install vue-router@4

vue-router 설치

 

vue-router 라이브러리의 createRouter() 함수를 호출해 router 객체 생성하는 것이 중요하다.

createRouter() 함수를 호출할 때 전달하는 인자 객체의 history 속성에는 라우터가 사용할 라우팅 모드 지정, routes 속성에는 요청 경로에 따라 어떤 컴포넌트를 렌더링할지 지정한다.

import { createWebHistory, createRouter } from 'vue-router'
import Link1 from '../components/Link1.vue'
import Link2 from '../components/Link2.vue'
import Link3 from '../components/Link3.vue'

const routes = [
  { path: '/link1', component: Link1 },
  { path: '/link2', component: Link2 },
  { path: '/link3', component: Link3 }
]

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

 

router 객체는 Vue 인스턴스에 등록해야한다. 등록하기 위해서 src -> main.js에 router 객체를 등록한다.

import router from "./router";

const app = createApp(App)
app.use(router)
app.mount('#app')

 

컴포넌트에서 router 객체의 각 경로별 컴포넌트를 렌더링할 위치를 지정해줘야한다. 이때 <router-view>를 이용한다.

화면 전환을 위한 링크를 만들고 싶으면 <router-link> 컴포넌트를 사용한다.

<template>
  <router-link to="/link1">링크1</router-link>
  <br></br>
  <router-link to="/link2">링크2</router-link>
  <br></br>
  <router-link to="/link3">링크3</router-link>
  <br></br>
  <router-view></router-view>
</template>

 

실행화면

링크를 클릭하면 경로에 따라 적절한 컴포넌트가 <router-view>에 표시되는 것을 볼 수 있다.