Vue Router

컴포넌트를 정리해두고 클라이언트의 요청경로에 따라 컴포넌트를 불러와 페이지를 구성함

vue-router 설치

명령어 : npm install vue-router

• router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

• main.js

import Vue from 'vue';
import router from './router';

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

• App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>
    </div>
    <router-view/> //라우터 영역 지정
  </div>
</template>