아래 코드는 src파일 안에 있는 main.js 파일입니다.

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

Vue.config.productionTip = false

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    
  ]
})

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

이런 식으로 VueRouter를 import해준 후 router를 직접 선언해서 사용할 수도 있지만,

main.js는 어플리케이션의 설정들에 대한 (플러그인과 라이브러리, 그리고 구조들을 한눈에 파악할 수 있는)일종의 청사진이 한눈에 들어와야 되기 때문에

이런 식의 활용은 추천하지 않는다. (너무 라우터 편향적인 main.js 파일이 되어버립니다)

그렇다면 어떻게 Router를 어떻게 사용해야 할까?

아래는 src/router(새로 생성)/index.js(새로 생성)의 코드입니다.

// 여기서도 import vue해줘야 함.
// main.js에서는 이미 npm으로 vue가 로딩이 되어있었다
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
        // path: url 주소
        path: '/',
        // component: url 주소로 갔을 때 표시될 컴포넌트
        component: '',
    },
    {
        path: '',
        component: '',
    },
    {
        path: '',
        component: '',
    }

  ]
})

위의 코드와 같은 방식으로 routes들을 등록시켜준 뒤