Vue router

라우팅
사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것

라우팅

페이지가 이동될 때마다 페이지 브라우저 주소란의 Url 주소가 바뀌는 것을 본 적이 있을 겁니다.
VUE와 같은 단일 페이지 어플리케이션의 경우 페이지가 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신합니다.

라우팅이란 클라이언트에서 url 주소에 따라 페이지가 전환되는 것입니다.
vue 프로젝트 내부에서 미리 url 주소를 정의하고 각 주소마다 vue 페이지를 연결합니다.

따라서, 메뉴 이동을 진행하면 url 주소에 해당하는 vue 페이지로 화면을 전환시킵니다.

vue-router 설치

vue add router

설치하게되면 @vue/cli-plugin-router가 설치되빈다.
설치가 끝나면 src 폴더에 router, views 폴더와 파일이 생성됩니다.

vue-router를 설치하고 나면 localhost:8080으로 가면 화면 상단에 자동으로 Home, About 링크 라우터가 정의된 샘플이 생성됩니다.

# App.vue
<router-link to="/">Home</router-link>

router-link to="이곳"으로 변경될 주소를 정의해서 브라우저 주소가 바뀔 때마다 바뀌어 보이게됩니다.

src/router/index.js에 가면
2개의 라우트가 등록되어 있는 것을 볼 수 있습니다.

• path : 브라우저 접속하는 url 주소를 정의합니다.

또한, index.js에서 import VueRouter from "vue-router"; vue에서 라우팅을 처리하기 위해 vue-router를 import하는 것을 확인할 수 있습니다.
이렇게 정의된 router는 main.js에 등록되어야 실제로 사용할 수 있는데
main.js에서 import router from "./systems/router"; 이 코드 줄을 통해 router폴더의 index.js가 import됩니다.

new Vue({
  router,
  store,
  i18n,
  http,
  render: (h) => h(App),
}).$mount("#app");

또한 최상위 컴포넌트인 App.vue로 app을 생성하고, use 코드를 추가하여 App.vue에서 router가 사용될 수 있도록 추가했습니다.

요약
메뉴 이동시 마다 이동 주소에 연결되어있는 vue 파일이 호출되고 해당 파일의 코드가 실행되어서 화면이 나타납니다.
이렇게 .vue 작성된 파일을 컴포넌트라고 부릅니다.