vue-router를 배우면서 보게된 에러

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.


router-link 라는 커스텀 엘리먼트를 알수없다. 너혹시 제대로 컴포넌트 등록한거 맞니?
라고 물어본다.


분명히 router/router.js에
import Vue from 'vue'
import VueRouter from 'vue-router' 라고 임포트했고

main.js에서 이 라우터를 임포트했는데?

어라?

main.js에서

import router from './router.js' 라고 되어있네? 이것도 바꾸고

src/components에 one, two,three vue파일이 없다.

이것도 대충 만들어서 넣어놓고

하니까

잘된다.

라우터파일에서 뷰와 뷰라우터를 임포트하고
라우터 파일에서 라우팅 하고자 하는 vue파일들을 임포트하고
Vue.use(VueRouter) 하고
라우트들을 path,component 지정해주고
VueRouter를 export default로 외부에서 참조할수 있게
해주면 라우터.js에서 해야할일은 다했다.

이제 main.js에서 App.vue 에서 쓸수있게 router.js를 올바르게 임포트 해주고

App.vue 에서
<router-view></roueter-vue> 라고 컴포넌트들이 보여질 자리에 배치해해 주면 끝
!! 아

끝이아니다
사용할 navi.vue에서
각 컴포넌트로 이동할 버튼에
<router-link to='/comp_one'><button>1</button></router-link>를 씌어줘야된다.

중요한건 상대적위치이다.
router.js에서 컴포넌트 밑에있는 vue파일들을 접근하려면
router폴더에서 벗어나기위해 ../ 폴더한칸 위로 올라가서 컴포넌트 폴더쪽으로 접근을 해야한다.

워낙 대충대충인 성격이라 이거 때문에 3시간은 에러메시지 보면서 골치아팠다.