Vue Cli 4.x (Vue3)에서 vue-router 사용하기

Vue를 이용한 토이 프로젝트를 하면서 SPA 구조를 위해 router를 사용하려고 막 구글링을 해서 만든 코드에서 에러가 발생하였다..

문제 발생

Cannot read property 'use' of undefined

 

결국은 해결하였지만 몇시간을 헤매 해결방안을 찾았다.

결론부터 말하면 버전의 호환성 문제였다. vue3를 vue2로 낮추면 해결가능하였지만 나는 vue3로 하고 싶었다.

그럼 Vue3로 vue-router를 구현해보자.

 

해결방안

1. 먼저 vue-router를 다음 명령어로 재설치한다. (버전을 맞추기 위해..)

npm i vue-router@next

 

2. router.js를 만들고 다음 코드를 작성하자. (필자의 프로젝트는 Vue cli 이다.)

import {createWebHistory, createRouter} from 'vue-router';
import Main from '@/views/Main';
import Page1 from '@/views/Page1';
import Page2 from '@/views/Page2';

const routes = [ 
    {path: "/", name:"Main", component: Main}, 
    {path: "/1", name:"Page1", component: Page1}, 
    {path: "/2", name:"Page2", component: Page2}, 
]

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

export default router;

 

3. src/main.js에 가서 user(router)를 추가해준다.

import { createApp } from 'vue'
import App from './App.vue'
import router from "./routes/router" // 필자는 routes 폴더 안에 넣었기 때문에 경로가 이렇다.

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

 

4. Router를 사용하고자 하는 Vue로 이동해 router-view를 추가

<template>
  <router-view></router-view>
</template>

 

5. router-link는 다음과 같다.

<template>
  <router-link to="/1">라우터 1번</router-link> // 직접 클릭해서 결과를 확인해보자!
  <router-link to="/2">라우터 2번</router-link>
</template>

 

이렇게 간단하게 필요한 것만 정리하였다.

더 자세한 내용은 다음 vue router 공식 문서를 참고하자.

 

참고 자료

vue router : https://next.router.vuejs.org/guide/#javascript

오늘도 감사합니다.