---
# System prepended metadata

title: 5. 라우터 실전
tags: [Vue.js 완벽 가이드, 지호]

---

# 5. 라우터 실전

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

---

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

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

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

![image](https://user-images.githubusercontent.com/24283401/162868996-55c98ef6-faf3-472b-8171-543382973135.png)


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

![image](https://user-images.githubusercontent.com/24283401/162869227-3fcca630-413c-45a3-8a89-911bd8fe0263.png)

<br/>

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

src/api/index.js 

![image](https://user-images.githubusercontent.com/24283401/162873385-98bd17a1-1fc5-4786-9bb1-325c2afbd6a5.png)

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

![image](https://user-images.githubusercontent.com/24283401/162873274-492ae8ad-9a6d-4138-9dbd-d4a423432b98.png)


src/store/actions.js

![image](https://user-images.githubusercontent.com/24283401/162873462-ec5df609-ab86-4ff7-a175-355227db1eb3.png)


<br/>

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

![image](https://user-images.githubusercontent.com/24283401/163079816-9b11e1be-a0f4-4e29-b699-fc11fe479f57.png)


참고
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
