# 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)