Vue - 라우터를 사용하여 페이지를 이동

안녕하세요. 오틸라 입니다.
 
 
지난시간에 최초 Vue설치 및 서버배포를 해보았고,
 
이번시간에는 "페이지를 여러개 만들어서 링크를 클릭해 이동" 해보는걸 해보겠습니다.
 

 
홈화면, 메인화면, 인포화면 3개에 페이지를 만들고, 이동해보겠습니다.
 
우선, 페이지 이동에 필요한 vue-router부터 설치를 해줍니다.

참고 : Vue3버전 입니다.

 
 
먼저 해당 프로젝트 폴더로 이동해서 cmd창을 열고
 

npm install vue-router@next

를 입력하여 설치를 합니다.
 
 
 
1. 루트폴더에 router_index.js 파일을 생성한 뒤

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

import Info from './views/InfoScreen.vue'

import Main from './views/MainScreen.vue'

import Home from './views/HomeScreen.vue'

const routes = [

    {

        path: '/',

        name: 'Home',

        component: Home

    },

    {

        path: '/main',

        name: 'Main',

        component: Main

    },

    {

        path: '/info',

        name: 'Info',

        component: Info

    }

]

const router = createRouter({

    history: createWebHistory(),

    routes

})

export default router

내용을 입력합니다.
 
루트폴더/views/ 폴더에 3개의 페이지 파일이 필요합니다.
InfoScreen.vue, MainScreen.vue, HomeScreen.vue
 
폴더와 파일을 생성합니다.
파일내용은 모두 기본 텍스트만 넣어둡니다.

<template>

    <div>

      <h1>Home</h1>

    </div>

</template>

 
 

<template>

    <div>

      <h1>InfoPage</h1>

    </div>

</template>

 
 

<template>

    <div>

      <h1>MainPage</h1>

    </div>

</template>

 
 
이렇게 만들어진 폴더트리는 아래와 같습니다.

 
이제 main.js파일을 수정해줍니다.
 

import { createApp } from 'vue'

import App from './App.vue';

import router from './router_index.js';

const app = createApp(App)

app.use(router)

app.mount('#app')

 

반응형

 
마지막으로
App.vue파일을 수정해줍니다.

<template>

  <router-view></router-view>

  <div><a href="/" class="">home</a></div>

  <div><a href="/main" class="">main</a></div>

  <div><a href="/info" class="">info</a></div>

</template>

 

 
페이지 이동까지 완료되었습니다.
 
 
이상 오틸라였습니다.
건강하세요~