Vue Router 만들기 (url에 페이지 연결하기)

Vue 에서 url로 페이지 넘길 수 있도록 Router를 만들어 보겠습니다.

콘솔창을 엽니다.

자신의 vue 패키지 폴더 경로 밑에서

npm install vue-router --save 

로 라우터를 깝니다.

src 밑에 routes.js 파일을 하나 만듭니다.

그리고 component들을 임포트 한 다음 path를 각각 지정해 줍니다.

이제 main.js로 가서 라우터를 임포트 해줍니다.

아까 npm으로 설치한 라우터와

방금 위에서 만든 routes 파일을 임포트 해줍니다.

그리고 Vue.use(VueRouter); 코드로 라우터 사용 선언해줍니다.

그리고 Vue를 정의해 준 곳에 router:router를 추가해줍니다.

App.vue에 router-view를 추가해줍니다.

그럼 url을 타고 페이지를 변경할 수 있습니다.