4.Composition API기본 (Vue Router)

Vue router란? 

-웹 페이지의 라우팅을 제어하는 Vue공식 플러그인. SPA 를 구축 할 수 있음.

 

여기서 라우팅이란,

URL로 표시하는 페이지를 연결하는것. URL이 입력되었을 때 이 디렉토리의 이 페이지를 표시한다 라는 룰을 정해놓은것.

 

한 번 사용해보자 

우선 설치는

 

npm install vue-router@4    입력

 

/src/router/index.js

src폴더 안에 router폴더를 만들고 그안에 index.js라는 파일생성

import { createRouter } from ‘vue-router’; 입력 

 

여기서 createRouter의 옵션을 사용하는데 

첫번째로  history, 두번째로는 routes 어레이를 사용한다.

각 항목에 대해서는

• path : URL의 경로.
• name :  경로에 연결할 떄 사용할 이름.
• component : 이 경로가 호출될 때 로드할 구성요소.  

그후 main.js에서 import할 수 있도록 맨 아래에 export default router; 를 해줌

 

/src/main.js

 

라우터 파일을 가져오기위해 import router from './router' 작성해줌.

그 후 use(router)를 밑에 작성해서 사용 한다고 선언.

 

 

 

 

/src/App.vue

사용 <router-view>및<router-link>

이것은 Vue 애플리케이션이 템플릿에서 사용하도록 제공하는 두 가지 지시문이다.

 

<router-view /> : 각각의 링크에 해당하는 구성요소를 표시

<router-link> : 링크를 작성하기 위한 것 

 

/src/router/index.js 에서 import 한 각각의 pages안에는 router컴포넌트가 들어감.

 

 

import 한  Home에 가보면 이런 식으로 작성되어있다.

다음은 Todos 페이지의 모습이다.

 

이것을 화면에 연결해보면 이런식으로 뜨는 걸 확인 해볼 수 있다.

 

 

 

Home을 클릭하면 homepages라고 작성된 기본페이지가 뜨는것을 확인할 수 있고,

다음으로 Todos를 클릭해보면 

이와 같이 Todos Page라고 작성된 페이지가 뜨는 것을 확인할 수 있다. 

 

이렇게 router 를 활용하면, 여러 페이지를 새로고침하지않고 이동할 수있는 

아주 강력한 SPA를 구축 할 수있게 된다!