Vue 3.0 - vue-router 설명

vue-router를 사용하기 앞서서 vue-router를 설치하여야 합니다.

npm i vue-router@next

명령어를 실행 후 package.json 파일에 dependencies에 vue-router가 있는지 확인합니다.

있으면 설치가 잘 된 것입니다.

뷰라우터 설계 및 생성

router 설정 순서

1. src 아래 router 폴더를 만들어 줍니다.
2. router 폴더 안에 index.js 파일을 만들어 줍니다.
3. src 아래 views 폴더를 만들어 줍니다.
4. views 폴더 안에 OneView.vue, TwoView.vue, ThreeView.vue 파일을 만들어 줍니다.

src/router/index.js

src/router/index.js

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

// 연결할 각 컴포넌트 import (src/views폴더 아래 컴포넌트들 생성해둠)
import FirstView from '../views/FirstView'
import SecondView from '../views/SecondView'
import ThirdView from '../views/ThirdView'

// 라우터 설계
const routes = [
    { path: '/1', component:FirstView},
    { path: '/2', component:SecondView},
    { path: '/3', component:ThirdView}
]

// 라우터 생성
const router = createRouter({
    history: createWebHistory(),
    routes
});

// 라우터 추출 (main.js에서 import)
export {router}

뷰라우터 사용

src/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')

src/App.vue