[VueJS] Vue 라우터 설치

라우팅

 

특정 웹페이지에 접속을 했을 때 메뉴 또는 특정 링크를 클릭하면 화면이 전환된다. 이 때 브라우저 주소란을 보면 페이지가 이동될때마다 url 주소가 변경되는 것을 볼 수 있다.  뷰와 같은 단일 페이지 애플리케이션인 경우에는 페이지를 이동할 때마다 서버에 요청해서 페이지를 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. 

 

라우팅은 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해할 수 있다.

 

---

 

Vue Router 설치방법

vue add router

 

 

기존 src

router history를 Yes 선택하고 한다.

 

src에 router와 views가 생긴것을 확인 할 수 있다.

 

 

실행

npm run serve

 

 

http://localhost:8080 화면이 뜬 걸 확인할 수 있다

http://localhost:8080/admin 페이지 이동하는 것 확인 가능

 

---

 

index.js 코드 분석

path로 url 설정 가능

component로 view.vue 파일 설정