vue-router

https://router.vuejs.org/kr 

Vue Router

CDN

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

---

· 라우팅: 웹 페이지 간의 이동 방법

· Vue.js의 공식 라우터

· 라우터는 component와 매핑

· Vue를 이용한 SPA를 제작할 때 유영

· URL에 따라 컴포넌트를 연결하고, 설정된 컴포넌트를 보여준다.

---

vue-router 연결

· routes 옵션과 함께 router instance 생성

vue-router 이동 및 렌더링

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

· 속성은 to 사용

· <router-link>는 <a>로 렌더링: a는 페이지가 이동하지만, router-link는 컴포넌트가 보이게 하는 역할

<router-link to="/">HOME</router-link>

$router, $route

· $router: 전체 라우터 정보

this.$router

· $route: 현재 호출된 라우터 정보

this.$route
this.$route.params.no
this.$route.path

· params: 뒤에 있는 파라미터 다 얻어냄

· path: 경로