[Vue.js] Vue2 에서 라우터 문제가 있을 때

Vue2를 사용하면서 라우터 기능을 사용하기 위해

npm install 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)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'inject' (imported as 'inject') was not found in 
'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'watchEffect' (imported as 'watchEffect') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'defineComponent' (imported as 'defineComponent') was not found in 'vue' (possible exports: default)     

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'h' (imported as 'h') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'provide' (imported as 'provide') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'ref' (imported as 'ref') was not found in 'vue' 
(possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'shallowRef' (imported as 'shallowRef') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'nextTick' (imported as 'nextTick') was not found in 'vue' (possible exports: default)

 warning  in ./src/router/index.js

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)

다음과 같은 오류? warning이 발생하며 화면이 표시되지 않았다

VueRouter에서 반복적으로 오류가 발생하고 있는데 어디서 오류가 발생하는지 알 수가 없어 한참을 고민했는데 결과적으로

 

버전문제였다!

 

Vue2에서는 vue-router @4버젼을 사용할 수 없으니 지우고 새로 설치해야한다

 

모듈 지우고 새로 설치

npm uninstall vue-router

npm install --save vue-router@3