Nuxt3 Custom Routing

안녕하세요 Lovefield입니다.

요즘은 웬만한 URL 구성은 폴더구조를 사용해 구성이 가능합니다. 하지만 항상 변수는 존재하는 법, 실무에서 폴더 구조를 사용하여 URL을 구성하기에는 한계가 있었습니다. 페이지 네이션 등 URL 구성 특성상 폴더 구조로 만들기에는 애매한 것들이 존재하기 때문입니다. 이번 글에서는 Nuxt3에서 커스텀 라우터를 생성하는 방법을 짧게 서술하려 합니다.

커스텀 라우터를 설정하는 방법은 크게 두 가지가 존재합니다. 첫 번째로는 nuxt.config.ts 에 router 옵션을 사용하는 방법, 두 번째는 app/router.option.ts 파일을 생성하는 방법입니다. 개인적으로는 두 번째 방법을 선호합니다. 첫 번째 방법은 생각보다 라우터에 선언해야 하는 정보들이 많다 보니 nuxt.config.ts가 복잡해져서 코드가 지저분해지기 때문입니다. 자 그럼 두 번째 방법으로 진행하겠습니다.

먼저 app/router.option.ts 파일을 생성해 줍니다.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {

}

기본적인 파일의 구조입니다. @nuxt/schema에서 RouterConfig 라는 타입을 가져와야 합니다. 그리고 export default로 설정 오브젝트를 넘겨주는 방식을 사용합니다. 파일을 생성하게 되면 Nuxt3는 자동으로 해당 파일을 읽게 됩니다. 이 오브젝트에는 hashMode, history, routes 라는 키가 존재합니다. 그중 저희가 사용해야 하는 키는 routes입니다.

routes키는 함수형이며 다음과 같이 작성해야 합니다.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes)=>{
    }
}

인자로 받게 되는 _routes는 읽기전용 이며 수정할 수 없습니다. _routes에는 폴더구조로 생성된 라우터 값들이 RouteRecordRaw 타입 배열로 들어있습니다. 반환 값으로도 역시 RouteRecordRaw 배열을 반환해야 합니다. 즉 폴더구조로 생성한 정보와 동일한 정보를 전달해 주면 됩니다. 주의할 점은 반환 값으로 생성한 구조를 전달하면 기존에 가지고 있던 정보가 사라진다는 점입니다. _routes 값과 설정하고 싶은 정보를 결합해서 반환 값으로 전달해야 합니다.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes)=>{
            const routeList = [..._routes];
	
            return routeList.concat([		
        ]);
    }
}

먼저 읽기전용 상태인 _routes를 전개 구문을 이용해 배열에 담아줍니다. 이제 배열의 concat 메서드 를 이용하여 기존에 존재하는 라우터 리스트와 추가하고 싶은 라우터 옵션을 구성하고 반환 값으로 전달합니다. 라우터 옵션에 구성해야 하는 값은 다음과 같습니다.

{
name: string;,
path: string;
component: Function / return vue file;
meta: pageMeta;
props: props;
}

name : 페이지의 고유 이름입니다. 기존 폴더구조로 생성되는 페이지들의 이름은 `폴더명-파일명` 구조로 자동 생성됩니다. 예로 들면 auth/login.vue 파일의 라우터 페이지 이름은 “auth-login”으로 구성되어 있습니다. 이렇듯 자동 생성된 고유 이름과 겹치지 않는 별도의 이름을 지정해 주면 됩니다.

path : 라우터에서 설정할 경로입니다. 폴더구조로 /community/[boardType]/[page] 구조를 설정했다면 path에는 /community/:boardType/:page로 적으면 됩니다.

component : 가장 중요한 부분입니다. vue 파일을 지정해야 합니다. 다음과 같이 사용할 수 있습니다. () => import(“@/pages/community/list.vue”)

meta : 페이지에서 사용하는 definePageMeta와 같은 역할을 합니다. component 부분에서 가져온 vue파일에 definePageMeta가 설정되어 있다고 해도 적용되지 않습니다.

props : 페이지에서 사용하는 defineProps에서 받을 수 있는 값을 지정합니다.

최종 코드는 다음과 같습니다.

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes)=>{
        const routeList = [..._routes];

        return routeList.concat([
            {
                name: “community-list-page”,
                path: “/community/:boardType/:page”,
                component: ()=> import(“@/pages/community/list.vue”),
                meta: {
                    layout: “community”,
                    middleware: [“pc-required”]
                },
                props: {
                    someValue: “value”
                }
            }
        ]);
    }
}