# 08. Router

### 실습

> (예제는 [이전의](https://simplevue.gitbook.io/intro/02.-component#undefined-3) 초기 구성되었던 환경에서 시작합니다.)

#### vue-router 설치&#x20;

```
npm i --save vue-router
```

#### router.js 추가&#x20;

path 마다 다른 component 를 보여주기 위해서는 설정이 필요합니다.

```javascript
// src/router.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter); // vue 에서 vue router 를 사용하기 위해 알려줘야합니다.

const router = new VueRouter({
  mode: "history", // browser history mode 를 사용합니다.
  routes: [{ path: "/", component: "" }] // path 별 component 를 추가합니다.
});

export default router;

```

\
`/` path 로 들어왔을 경우 보여줄 메인 페이지를 추가해보겠습니다.

```javascript
// src/views/Home.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

```

`/` path 이외의 우리가 정의하지 않은 path 로 들어올 경우 보여줄 Error Page 를 추가하겠습니다.

```javascript
// src/views/ErrorPage.vue

<template>
  <div>
    <h1>Error Page</h1>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>
```

path 별로 보여줄 component 설정을 추가해보겠습니다.

```javascript
import Vue from "vue";
import VueRouter from "vue-router";
import ErrorPage from "./views/ErrorPage";
import Home from "./views/Home";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: Home },
    {
      path: "*",
      component: ErrorPage
    }
  ]
});

export default router;

```

#### main.js 에 router 추가하기

router.js 를 추가만 한다고 router 를 이용할 수 있는 것은 아닙니다.  main.js 에 추가를 해줘야합니다.

```javascript
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

```

#### App.vue 에 router-view 추가하기

routing 된 component 를 보여주기 위해서는 App.vue 에 router-view 를 추가해줘야합니다.

```javascript
<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>
```

![](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LglULVWqpnArGrYsV3Z%2F-LglZEKzG2jrzC6rtKDj%2FKapture%202019-06-07%20at%2019.49.57.gif?alt=media\&token=1987c199-7e33-4bb9-ba0c-d42bf526d3df)
