[Vue.js] Vue2 라우터 설정시 발생한 에러

문제 발생 

이번에 Vue를 처음 사용해 보게 되었다.

Vue에서 router를 사용하기 위해서 라이브러리 설치가 필요하다.

# npm
npm i vue-router
# yarn
yarn add vue-router

설치하래서 설치했더니 이게 웬 에러..

 

 WARNING  Compiled with 17 warnings

 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default)

...

export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType,RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

원인

router의 버전이 원인이었다.

vue-router은 v4까지 출시되었는데 v4는 vue3에서만 사용할 수 있고, vue2에서 사용하기 위해서는 vue-router v3을 설치했어야 했다.

vue-router 공식문서

해결

# npm
npm i vue-router@3
# yarn
yarn add vue-router@3

v3 버전으로 재설치하니 에러 없이 잘 돌아갔다.