route.js를 커스텀해보자

화면 개발을 하다 보면 모든 화면에 공통적으로 들어가는 헤더 / 푸터 / 메뉴를 정의할 때 도 있고, 어떤 화면은 두 가지만 사용하기도 하고 모두 제각각이다.

그럴 때 마다 컴포넌트를 임포트 해서 사용하지 않고 route.js파일을 커스텀해 미리 템플릿을 만들어 놓고 사용하자. 그리고 라우터들이 정의된 모습도 깔끔하게 정리 해 보자.

function loadView (view) {
  return () => import(/* webpackChunkName: "view-[request]" */ '@/views/' + view + '.vue')
}

function loadLayout (layout) {
  return () => import(`@/components/layout/${layout}.vue`)
}

const loadViewHeaderFooterSide = view => {
  return {
    default: loadView(view),
    sidebar: loadLayout('main-sidebar'),
    footer: loadLayout('main-footer'),
    header: loadLayout('main-navbar')
  }
}

const parent = (parentName) => {
  return {
    default: {
      name: parentName,
      template: '<router-view></router-view>'
    },
    header: loadLayout('main-navbar'),
    footer: loadLayout('main-footer')
  }
}

loadView 는 views 디렉토리에 들어있는, 클라이언트가 마주 할 화면을 말한다.
위와 같은 형식으로 정의하면 return문에 의해 자동으로 route.js파일에 임포트해 컴포넌트를 사용할 수 있게 된다.

loadLayout은 사용자가 마주하긴 하지만 메인 화면은 되지 않는 componenet 디렉토리의 컴포넌트들을 정의한다.

vue-route 라이브러리를 받게되면 각 라우트들은 props로 인자를 받을 수 있는데, 헤더 푸터 사이드바도 인자로 받아 사용할 수 있다. 그렇기 때문에 우리는 미리 여러가지 템플릿(헤더 푸터 사이드바가 모두 필요하거나, 푸터만 쓰거나 등등)을 정의 해 놓고 사용할 수 있게 되는 것이다.

loadViewHeaderFooterSide가 그것이다.
기본값은 인자로 받은 views를 보여주지만 헤더, 푸터, 사이드바는 미리 componenet 디렉토리에 구성 한 것들로 템플릿을 만들어 return 해 준다.

이제 loadViewHeaderFooterSide로 선언한 컴포넌트들은 모두 같은 템플릿을 가지게 된다.

parent는 child를 가지는 부모 라우터를 정의할 때 사용한다. 예를 들어

  {
    path: '/user',
    name: 'user',
    components: parent('user'),
    props: {
      header: {},
      footer: {}
    },
    children: [{
      path: 'login',
      name: 'user-login',
      component: loadView('user-login'),
      meta: {
        title: 'user.login'
      }
    }]
    }

이런 경우에 사용한다.

user라는 컴포넌트 자체를 사용하는 것이 아니라 빈 화면에 user라는 부모이름만 두고, 그 하위에 라우터들을 작성 할 때 parent에 부모 라우터 이름을 넣어준다.
이렇게 정의하면 children 라우터들의 prefix에는 부모 이름이 기재되고 parent에 정의 한 기타 컴포넌트가 보이게 된다.

부모가 없는 메인화면의 경우는

  {
    path: '/',
    name: 'home-main',
    components: loadViewHeaderFooterSide('home-main'),
    props: {
      header: {},
      sidebar: {},
      footer: {}
    },
    meta: {
      title: 'home.title'
    }
  },

이렇게 정의 해 주면 되고, 헤더 푸터 사이드바 등이 필요하지 않으면 그냥 loadView로 선언해 사용하면 된다.