unplugin-vue-router

프로젝트 규모가 커질수록 Vue나 React에서는 라우트 관리에 대해 번거로움이 생길 수 있다. 이러한 문제에 직면한 개발자들을 위해 등장한 것은 unplugin-vue-router이다. 

사실 필자는 아직까지 이러한 문제를 심각하게 경험하지 않아 모르는 부분이지만, 이 패키지는 어떻게 사용되며, 어떤 문제들을 해결해 주는지 자세히 알아보도록 하겠다.

 

이 패키지를 사용할 때에는 vue router를 최소 4.1.0 버전 이상을 사용하는 것을 권장하며, 실험적인 패키지이기 때문에 사용 시 주의가 필요할 수 있다.

다만, 이 패키지외에 다른 라이브러리인 vite-plugin-pages가 있는데 여기에서는 unplugin-vue-router를 권장하고 있다는 것을 감안하고 이 글을 읽기를 바란다.

 

그럼 이제 사용방법을 알아보자.

사용방법은 매우 간단하다. 먼저, 해당하는 프로젝트에 아래 코드를 터미널에 작성하여 설치를 한다.

npm i -D unplugin-vue-router

 

그리고 해당 플러그인에 따라 설정하는 방법은 필자는 Vite를 기준으로 작성이 되었기에, 이 이후에 Vite 외에 다른 번들러를 사용하고 있다면 공식문서를 참조하기를 바란다.

 

필자는 Vite에서 Quasar를 사용하고 있기에 Vite를 참고하여 quasar.config에 있는 부분에 plugins을 추가하였다.

아래 코드에 보면 알 수 있으며, vitePlugins를 검색하여 주석처리를 해제를 하여 아래처럼 해준다.

// ...
// quasar.config.js OR quasar.config.ts
	vitePlugins: [
        ['unplugin-vue-router/vite', {}],
        // ['패키지명', {옵션들}]
    ],
// ...

 

 

그리고 하나 더 세팅을 하면 된다. 아래 코드처럼 vue-router에서 vue-router/auto를 추가해 주고, 아래 import routes와 routes를 주석 혹은 제거를 해주면 된다. (이 코드는 route/index.js가 초기에 설정된 내용을 기반으로 정리하였다.)

// src/router/index.js

import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router/auto';
// import routes from './routes'

export default route(function (/* { store, ssrContext } */) {
  // ...
  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    // routes,
    // ...
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  return Router;
});

 

이렇게 하게 되면 vue에서 pages페이지에 폴더명을 index 혹은 user 폴더 안에 mypage.vue를 하게 되면 index는 메인 홈페이지, mypage는 user/mypage로 설정이 되는 것을 확인할 수 있다.

 

그 외에 좀 더 유용한 추가적인 내용을 정리해보았다.

아까 기본으로 설정하고 중괄호로 비워두었던 곳이 options라고 적혀 있었는데 해당 부분에 내가 필요로 하는 options을 정의할 수 있다.

// quasar.config.js
// ...
	vitePlugins: [
        [
          'unplugin-vue-router/vite',
          {
            routesFolder: [
              { src: 'src/pages' },
              { src: 'src/docs', path: 'docs/' },
            ],
            exclude: ['**/components/**'],
          },
        ],
     ],
 // ...

 

 

routeFolder

기본 라우터를 폴더별로 개발자가 직접 정의할 수 있다.

routeFolder: 'src/pages',

// OR

routeFolder: [
	{src: 'src/pages'},
	{src: 'src/docs', path: 'docs/'},
    // ...
]

 

위 코드처럼 해당 옵션은 string 형식/배열형식으로 한 개 혹은 여러 개를 설정할 수 있다. 만약 src/pages가 기본으로 쓰이지 않는 프로젝트라면 이 부분만 따로 설정을 해주면 된다.

혹은 여러 폴더의 경로 중에 직접 경로를 설정해주고 싶으면 배열로 설정을 해줄 수 있다.

 

exclude

폴더 혹은 파일을 예외처리를 할 수 있다.

exclude: ['**/test1*', '**/test2*/**/*', '**/*.component.vue'],

 

여기서 첫 번째 test1은 routerFolder안에 있는 test1 폴더로 시작하는 모든 파일과 폴더를 제외한다고 한다.

test2로 시작하는 폴더 내의 모든 파일을 제외한다.

component.vue로 끝나는 파일을 제외한다. 

 

 

이렇게 오늘은 router을 자동으로 관리해 주는 라이브러리를 알아보았다.

실제 프로젝트에 써보면 물론 좋겠지만, 아직까지는 크게 쓰인 적이 없으니 개인프로젝트에서 한번 경험해 보면 좋을 것 같다.