Vue Router를 사용하여 여러 페이지를 다루고 각 페이지에 주소를 지정하는 방법입니다.
1. Vue Router 설치
먼저 Vue 프로젝트에 Vue Router를 설치해야 합니다. 이미 설치된 경우 이 단계를 건너뛰세요.
npm install vue-router
2. Vue Router 설정
Vue Router를 설정하려면 src 폴더에 router 폴더를 생성하고 그 안에 index.js 파일을 만듭니다.
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue' // Home은 실제 컴포넌트 이름에 맞게 수정해야 합니다.
import About from '@/views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
// 다른 페이지를 추가
]
const router = new VueRouter({
routes,
})
export default router
3. 페이지 컴포넌트 생성
src/views 폴더에 각 페이지에 해당하는 컴포넌트를 만듭니다. 예를 들어, Home.vue라는 파일을 만들 수 있습니다.
<!-- src/views/Home.vue -->
<template>
<div>
<h1>홈 페이지</h1>
<!-- 내용 -->
</div>
</template>
<script>
export default {
// 컴포넌트 로직
}
</script>
4. App.vue 수정
App.vue에서 router-view 컴포넌트를 추가하여 페이지 컴포넌트가 표시되는 위치를 지정합니다.
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
// 앱 전체 로직
}
</script>
5. 라우터 링크 사용
이제 페이지 간 전환을 위해 라우터 링크를 사용할 수 있습니다. 예를 들어, 메뉴 항목을 클릭하여 다른 페이지로 이동하려면 다음과 같이 router-link를 사용합니다.
<router-link to="/">홈</router-link>
<router-link to="/about">소개</router-link>
이제 여러 페이지를 가진 Vue.js 앱을 만들었습니다. 페이지 간 이동은 router-link를 사용하여 수행할 수 있으며, 각 페이지는 고유한 주소를 가집니다. 페이지 컴포넌트에서 페이지의 내용을 구성하고 페이지 간 이동을 관리할 수 있습니다.
'Frontend > vue3' 카테고리의 다른 글
public 디렉토리 (0) | 2023.10.16 |
---|---|
v-if v-show 차이 (0) | 2023.08.24 |
mounted, beforeUnmount, unmounted (0) | 2023.08.24 |
vue3 window 이벤트 등록 (0) | 2023.08.24 |
동적 속성 바인딩(콜론(:), v-bind 디렉티브) / 조건부 할당 (0) | 2023.07.19 |