라우터 파일을 별도로 설정할 때

보통 Vue Cli를 통해 Vue 프로젝트를 시작하면 index 파일에 직접적으로 다음과 같이 라우터가 설정이 되어있다.

//index.js

import Vue from 'vue'
import Router from 'vue-router'
import This from '../This'
import Is from '../Is'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'This',
      component: This
    },
    {
      path: '/is',
      name: 'Is',
      component: Is
    }
  ]
})

 

하지만 여러개의 라우터가 필요할 수 있고, 별도로 파일을 지정해 사용하는 것이 용의할 수 있다. 그럴 때는 그냥 자동으로 생성되는 route 폴더 아래에 routes(혹은 어떤 이름이든 라우터라고 확인할 수 있는 이름으로)라는 파일을 만들어 그곳에서 따로 지정하여 index파일에서 import하여(중요) 다음과 같이 사용하면된다.

 

//routes.js

const routes = [
  {
    path: "/",
    component: {
      template: "<div>this is yes</div>"
    },
    children: [
      {
        path: "number1",
        component: {
          template: "<div>this is number1</div>"
        }
      }
    ]
  }
];

export default routes;

//index.js

import Vue from "vue";
import Router from "vue-router";
import routes from "../router/routes";
Vue.use(Router);

export default new Router({
  routes
});