Router

뷰 라우터는 싱글 페이지 에플리케이션을 구현 할 떄는 사용하는 라이브러리다.
여기서 잠깐 넘겨집어야되는 것이 있다. 싱글 페이지 에플리케이션 SPA 이다.
#### MPA (Multi page Appplication)

레거시에서 사용하는 구조로 서버에서 미리 index.html 같은 다양한 HTML 파일을 만들어두고 클라이언트에서 요청하면 Java 에서 DB 에서 쿼리를 돌려 데이터를 꺼내 jsp 파일을 통해 HTML을 형태화해서 전송한다.

기존에는 했지만 과거에는 웹에서 제공되는 정보가 그렇게 많지 않았고,
페이지를 이동할 떄 마다 매번 새로운 정보를 보여줘야하는 서버측에서는 너무 부담이 심했기에 새로운 방식 SPA 가 등장하게 되었다.

### SPA(Single Page Application)

서버에서 사용자들에게 보여줄 파일을 렌더링 하는것이 아니라 브라우저에서 해결도록 만든것이다.

index.html 하나의 파일만 가지고 안의 내용물들을 JS 파일의 DOM 조작으로 채우는것이다.

라우터 설치

CDN 방식

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">

NPM 방식

npm install vue-router

라우터 셋팅

STEP1 src 폴더 안에 아무데나 router.js 파일을 만들고

이 구조에서 path,component 를 추가하면 된다.

STEP2 main.js에도 라우터를 쓴다고 해줘야함.

import router from './router'
createApp(App).use(router).mount('#app')

라우트 활용 예시

예를 들어 버튼을 클릭하여 /list 접속할시 list.vue 를 보여주고 싶다?

import List from './components/List.vue';
const routes = [
{
  path: '/list',
  component: List,
}
];

  
사용할려는 곳에다가,
<router-link to="/list">이동하기</router-link>
입력해주면, <a> 태그처럼 변형이 되고
태그 클릭 시 list.vue 에 해당되는 내용을 보여지게 된다.