vue.js 여러 개의 컴포넌트를 코드 한 줄로 가져오기

1. 문제

import Vue from 'vue';
import VueRouter from 'vue-router';
import Signin from '../components/Signin.vue';
import Signup from '../components/Signup.vue';
import Post from '../components/Post.vue';
// ... 점점 늘어나는 컴포넌트들
Vue.use(VueRouter);

export default new VueRouter({
  mode : 'history',
  routes: [
    {
      path : '/',
      component : Signin
    },
    {
      path : '/signup',
      component : Signup
    },
    {
      path : `/post`,
      component : Post
    }
    // ... 점점 늘어나는 컴포넌트들
  ]

});

/src/router/index.js

페이지 이동에 사용되는 라우터를 설정하는 파일이다.

컴포넌트들을 여러 개 만들고 라우터를 연결해주면 다음 상황을 반드시 마주치게 된다.

컴포넌트가 늘어나면 늘어날수록 import 코드도 점점 늘어나게 될 것이고, 가져오기 위해 일일이 동일한 코드를 계속 작성해야 한다. 오히려 코드 길이만 늘어나 가독성을 해치게 되고 유지보수에도 좋지 않다.

 

 

 

 

2. 해결

export { default as Signin } from './Signin.vue';
export { default as Signup } from './Signup.vue';
export { default as Post } from './Post.vue';

/src/components/index.js

가져오고자 하는 컴포넌트들이 모인 폴더에 index.js를 하나 만든다.

 

 

 

import Vue from 'vue';
import VueRouter from 'vue-router';
import {Signin, Signup, Post} from '../components';
/*
주석 친 부분은 지워도 됨
import Signin from '../components/Signin.vue';
import Signup from '../components/Signup.vue';
import Post from '../components/Post.vue';
*/
Vue.use(VueRouter);

export default new VueRouter({
  mode : 'history',
  routes: [
    {
      path : '/',
      component : Signin
    },
    {
      path : '/signup',
      component : Signup
    },
    {
      path : `/post`,
      component : Post
    }
  ]

});

 

/src/router/index.js

이제 코드 한 줄로 여러 개의 컴포넌트들을 가져올 수 있게 됐으며, 필요한 컴포넌트만 가져오는 것도 가능하다.