---
# System prepended metadata

title: 2. 라우터 기본
tags: [Vue.js 완벽 가이드, 지호]

---

# 2. 라우터 기본

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

---

## 1. 라우터 설치 및 라우터 구현

### 라우터 설치
```javascript=
    npm i vue-router@3.5.3 --save
```

<br/>

### router-view

라우팅 컴포넌트 표시

src/routes/index.js

![image](https://user-images.githubusercontent.com/24283401/162694763-6817bbeb-e143-46aa-bae8-6cfe014592b0.png)

<br/>

src/App.vue

![image](https://user-images.githubusercontent.com/24283401/162694874-27d967ed-532d-4735-befe-339acae12b1a.png)

<br/>

src/main.js

![image](https://user-images.githubusercontent.com/24283401/162694917-732d9c24-b214-4250-9f2b-35bacb824f95.png)


<br/>


## 2. redirect 속성과 router-link

### redirect

src/routes/index.js
![image](https://user-images.githubusercontent.com/24283401/162702319-335c0a1d-8b88-4810-b4df-71110dfe315b.png)

<br/>

### router-link

클릭 시 라우터를 통해 이동 가능하게 함

src/components/ToolBar.vue

![image](https://user-images.githubusercontent.com/24283401/162702456-82d1fd8c-a11e-4c44-ac41-cb16bba42f7f.png)


src/App.vue

![image](https://user-images.githubusercontent.com/24283401/162703214-1740ed7a-8c16-4854-aa6b-5e80845b7f0a.png)

<br/>

### scoped
해당 태그에서만 스타일 적용. 하위 스타일에 영향을 주지 않음.

```javascript=
<style scoped>
    
</style>
```

<br/>

### history

url에서 # 없이 라우팅이 가능

![image](https://user-images.githubusercontent.com/24283401/162705152-cc23b446-8baa-4f36-9d48-11e49a677c28.png)
