router 설정

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를 사용하여 수행할 수 있으며, 각 페이지는 고유한 주소를 가집니다. 페이지 컴포넌트에서 페이지의 내용을 구성하고 페이지 간 이동을 관리할 수 있습니다.