1️⃣ 페이지 분할과 라우터의 필요성
- 여러 페이지를 만들고 싶을 때 vue-router 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 보여줄 수 있습니다.
- 예시:
codingapple.com/list→ List.vuecodingapple.com/detail→ Detail.vue
2️⃣ vue-router 4 설치
터미널에서 아래 명령어를 입력합니다.
npm install vue-router@4
팁: 미리 띄워둔 미리보기는 종료한 후 설치하는 것이 좋습니다.
3️⃣ 라우터 파일 생성 (src/router.js)
프로젝트의 src 폴더 내에 router.js 파일을 생성하고, 아래와 같이 작성합니다.
참고: Vue3에서는 별도의
import { createRouter, createWebHistory } from "vue-router";
// 필요한 컴포넌트 import (경로는 상황에 맞게 수정)
import List from "./components/List.vue";
import Detail from "./components/Detail.vue";
// 라우트 설정
const routes = [
{
path: "/list",
component: List,
},
{
path: "/detail",
component: Detail,
},
// 추가 라우트가 필요하면 아래와 같이 오브젝트를 추가하세요.
// {
// path: "/경로",
// component: 해당 컴포넌트,
// },
];
// 라우터 생성
const router = createRouter({
history: createWebHistory(), // HTML5 History 모드 사용
routes,
});
export default router;
설명:
createWebHistory()를 사용하면 URL에 해시(#) 없이 깨끗한 경로를 사용할 수 있습니다.routes배열의 각 객체에서path와component만 수정하면 나만의 페이지들을 만들 수 있습니다.
4️⃣ main.js에서 라우터 적용
Vue3의 main.js 파일을 열고 아래처럼 수정합니다.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 방금 생성한 router 파일 import
createApp(App)
.use(router) // vue-router 사용 선언
.mount("#app");
설명:
Vue3에서는 createApp(App)를 통해 앱을 생성하고, .use(router)를 통해 전역으로 라우터를 등록한 후, mount() 함수를 사용해 앱을 DOM에 마운트합니다.
5️⃣ App.vue에 추가
라우터에 의해 변경되는 페이지 컴포넌트를 표시할 곳에 <router-view> 태그를 추가합니다.
Vue3의 문법을 사용한 예시입니다.
<template>
<!-- 라우터로 구분된 페이지가 이 자리에 표시됩니다. -->
<router-view :블로그글="블로그글" />
</template>
<script setup>
// 필요한 경우, props나 상태 관리 등을 여기서 작성합니다.
// 예시: 블로그글 데이터를 가져온다고 가정할 때
import { ref } from "vue";
const 블로그글 = ref([
/* 블로그 글 데이터 */
]);
</script>
<style>
/* App.vue 관련 스타일 */
</style>
참고:
만약 블로그 글 데이터를 자식 컴포넌트로 props로 전송하고 싶다면
<router-view>에 바인딩하여 전달할 수 있습니다.
6️⃣ 라우터에 새로운 경로 추가하기
추가 페이지를 만들고 싶다면 router.js 파일의 routes 배열에 객체를 추가하면 됩니다.
예시로, 누군가 /list로 접속하면 List.vue, /detail로 접속하면 Detail.vue가 보이게 하려면 아래와 같이 작성합니다.
// router.js 내
import List from "./components/List.vue";
import Detail from "./components/Detail.vue";
const routes = [
{
path: "/list",
component: List,
},
{
path: "/detail",
component: Detail,
},
];
팁:
라우트 경로를 정확히 작성하고, 해당 컴포넌트가 정상적으로 props 등을 받아 처리하는지 확인하세요.
7️⃣ 페이지 이동 링크 만들기
페이지 간 이동을 위해 <router-link> 컴포넌트를 사용합니다.
예시: /list 페이지로 이동하는 링크 버튼
<template>
<div>
<!-- router-link는 기본적으로 <a> 태그와 유사한 역할을 합니다. -->
<router-link to="/list">리스트 페이지로 이동하기</router-link>
</div>
</template>
설명:
to속성에 원하는 경로를 넣으면 해당 페이지로 이동할 수 있습니다. 여러 경로를 마음대로 설정 가능합니다.
📌 정리
- 설치:
npm install vue-router@4 - 라우터 파일 생성:
src/router.js파일에createRouter와createWebHistory를 사용해 라우팅 설정 - main.js: 앱 생성 시
.use(router)로 라우터 등록 - App.vue:
<router-view>를 추가해 라우터에 따라 컴포넌트 렌더링 - 라우트 추가:
routes배열에 새로운 경로와 컴포넌트 추가 - 페이지 이동:
<router-link to="/경로">를 사용하여 링크 생성
