# 5. 라우터 실전

###### tags: `지호`, `Vue.js 완벽 가이드`

---

## 1. 동적 라우트 매칭 원리 및 적용

참고: https://router.vuejs.org/guide/essentials/dynamic-matching.html

src/routes/index.js
동적 라우팅 추가


src/views/NewsView.vue
router-link를 이용하여 라우팅 적용


<br/>

## 2. 라우터 params를 이용한 User 상세 페이지 구현

src/api/index.js


src/views/UserView.vue
fetch 할 때 param을 넘겨줌. 1개만 가능 (여러 개일 때는 객체로 넘기기)


src/store/actions.js


<br/>

## 3. 라우터 트랜지션
화면 넘김을 부드럽게 해줌


참고
https://router.vuejs.org/guide/advanced/transitions.html#route-based-dynamic-transition
https://v2.vuejs.org/v2/guide/transitions.html?redirect=true

<br/>

## v-html
html을 화면에 적용해서 데이터를 뿌려할 때 사용

참고
https://vuejs.org/v2/api/#v-html
https://vuejs.org/v2/guide/syntax.html#Raw-HTML