08. Router

vue-router 를 이용하여 SPA routing 을 구현해봅니다.

실습

(예제는 이전의 초기 구성되었던 환경에서 시작합니다.)

vue-router 설치

npm i --save vue-router

router.js 추가

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

// 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 로 들어왔을 경우 보여줄 메인 페이지를 추가해보겠습니다.

// src/views/Home.vue

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

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

<style>
</style>

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

// src/views/ErrorPage.vue

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

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

<style>
</style>

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

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 에 추가를 해줘야합니다.

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 를 추가해줘야합니다.

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

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

<style>
</style>