Nuxt3 Custom Routing
Nuxt안녕하세요 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”
}
}
]);
}
}