Vue Router
Vue Router는 Vue.js 애플리케이션에서 라우팅을 처리하는 공식 라이브러리입니다. 이를 사용하면 URL에 따라 컴포넌트를 렌더링하거나 SPA(Single Page Application) 내에서 페이지를 전환할 수 있습니다. 이 글에서는 Vue Router를 설정하는 방법을 예시와 함께 단계별로 설명하겠습니다.
1. Vue Router란?
Vue Router는 Vue.js에서 라우팅을 구현하기 위한 도구로, 다음과 같은 기능을 제공합니다:
- URL에 따라 다른 컴포넌트를 렌더링.
- 동적 라우팅과 쿼리 파라미터 처리.
- 네비게이션 가드로 사용자 접근 제어.
- 히스토리 모드 및 해시 모드 지원.
SPA에서는 URL이 변경되더라도 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트합니다. Vue Router는 이를 가능하게 하며, 간단하고 직관적인 방식으로 라우팅을 설정할 수 있도록 도와줍니다.
2. 사용 방법
Vue Router를 사용하려면 설치 후 다음 파일을 생성하거나 수정해야 합니다:
(1) router 설치
npm install vue-router@4Vue 프로젝트 경로 shell에서 Vue Router을 설치합니다.
(2) router/index.js 파일 생성
src/router 디렉토리를 만들고, 그 안에 index.js 파일을 생성합니다. 이 파일은 라우터 설정을 정의하는 중심 파일입니다.
(3) main.js 파일 수정
Vue 애플리케이션의 진입 파일인 src/main.js에서 라우터를 애플리케이션에 등록해야 합니다.
(4) 컴포넌트 파일 생성
각 라우트에 대응하는 컴포넌트를 생성합니다. 예를 들어, Home.vue와 About.vue를 만들어보겠습니다.
3. 각 파일의 내용
(1) router/index.js
import { createRouter, createMemoryHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
];
const router = createRouter({
history: createMemoryHistory(),
routes,
});
export default router;이 코드는 Vue Router 인스턴스를 생성하고, 두 개의 라우트를 정의합니다.
/경로:Home컴포넌트를 렌더링./about경로:About컴포넌트를 렌더링.
(2) main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router); // 라우터 등록
app.mount('#app');라우터를 Vue 애플리케이션에 등록하여 사용할 수 있도록 설정합니다.
(3) 컴포넌트 파일
Home.vue
<script setup>
export default {
name: 'Home',
};
</script>
<template>
<div>
<h1>Home Page</h1>
<p>Welcome to the Home Page!</p>
</div>
</template>
<style scoped></style>About.vue
<script setup>
export default {
name: 'About',
};
</script>
<template>
<div>
<h1>About Page</h1>
<p>This is the About Page.</p>
</div>
</template>
<style scoped></style>이제 Vue Router를 통해 두 페이지를 전환할 수 있습니다. 브라우저에서 / 또는 /about 경로로 이동하면 각각의 컴포넌트가 렌더링됩니다. 추가적으로, 네비게이션 바를 구현하여 라우팅을 쉽게 탐색할 수도 있습니다.
네비게이션 바 예시
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</template>이렇게 하면 Vue Router를 이용한 기본적인 라우팅 설정이 완료됩니다. 더 복잡한 애플리케이션에서는 동적 라우트 매칭, 네비게이션 가드 등을 활용하여 확장된 기능을 구현할 수 있습니다. 시작하기 좋은 단계로 위의 과정을 따라해 보세요!
'개발 부트캠프 > 프론트엔드' 카테고리의 다른 글
| [Vue] Pinia (State Manager) (1) | 2024.12.26 |
|---|---|
| [Vue] Props & Emit (0) | 2024.12.24 |
| [Vue] 조건문&반복문 (v-if, v-for) (0) | 2024.12.23 |
| [Vue] 데이터 바인딩(Data Binding) (0) | 2024.12.23 |
| [Vue] Vite 프로젝트 생성 & 파일 용도 (0) | 2024.12.23 |
