Vue Router

화면이 전환될 때, 전환하는 행위를 Route로 칭한다.

SPA 제작 시 뷰에서 제공하는 유용한 라우팅 라이브러리가 Vue Router이다.

 

1. vue-router 설치

> npm i --save vue-router

 

2. router.js 추가

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

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

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

export default router;

 

3. main.js에 router 추가

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");

 

4. App.vue에 router-view 추가

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

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

<style>
</style>