[Vue.js] vue router로 멀티페이징하는 방법

• Vue 3에서 Vue Router를 여러 페이지(Multi-page)로 구성하려면, 라우터를 설정하고 여러 컴포넌트를 각 경로에 매핑하면 됩니다.

• 아래는 Vue 3 + Vue Router를 이용해 여러 페이지 라우팅을 구성하는 기본 예제입니다.

✅ 1. 설치

npm install vue-router

✅ 2. router 폴더 생성 후router/index.js 파일 생성

import { createRouter, createWebHistory } from 'vue-router'

// 페이지 컴포넌트 불러오기
import HomePage from '../components/HomePage.vue'
import AboutPage from '../components/AboutPage.vue'
import ContactPage from '../components/ContactPage.vue'

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage },
  { path: '/contact', component: ContactPage },
]

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

export default router

✅ 3. main.js 또는 main.ts에서 라우터 등록

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

✅ 4. App.vue에서 <router-view /> 사용

<template>
  <div>
    <nav>
	    <!-- a태그 대신 router-link 태그 사용 -->
      <router-link to="/">홈</router-link> |
      <router-link to="/about">소개</router-link> |
      <router-link to="/contact">연락처</router-link>
    </nav>
    
    <router-view />  <!-- router 로드 -->
    
  </div>
</template>

🔄 라우팅 테스트

• / → HomePage

• /about → AboutPage

• /contact → ContactPage