Vue Router

1. vue-router

- 라우팅 : 웹페이지 간의 이동 방법을 의미

: Vue.js의 공식 라우터

: 라우터는 컴포넌트와 매핑

: Vue를 이용한 SPA 제작시 유용

: URL에 따라 컴포넌트 연결하고 보여줌

 

 

2. vue-router 설치방식

① CDN

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

② NPM

npm install vue-router

 

 

3. vue-router 이동 및 렌더링

① router-link

: 내비게이션을 위해 router-link 컴포넌트 사용

: 속성 "to" 를 사용

: 기본적으로 <router-link>는 <a> 태그로 렌더링

 

② router-view

: 현재 라우트에 맞는 컴포넌트가 렌더링

 

 

4. 라우터 정보

① this.$router : 전체 라우터 정보

② this.$route : 현재 호출된 해당 라우터 정보

 

 

5. 이름이 있는 라우트

: 라우트는 연결하거나 탐색을 수행할 때 이름 있는 라우트를 사용

: Router Instance를 생성하는 동안 routes 옵션에 지정

 

 

 

6. 프로그래밍 방식 라우터

: <router-link>를 사용하여 선언적 내비게이션용 anchor 태그를 만드는 것 외에도 라우터의 instance method를 사용하여 프로그래밍으로 수행

→ $router.push({ path: "home", params : { no : 3 } })