Nuxt3 - custom router 추가하기

개발을 진행하다 동일 페이지인데 path 만 다른 페이지를 만들일이 있었다.

 

nuxt는 pages에 vue 파일을 만들면 자동으로 라우터를 생성해준다.

굉장히 편한기능이 아닐 수 없다. 

하지만 동일한 페이지인데 pages에 단순히 라우터 생성을 위해 같은 파일을 복붙 할 순 없었다.

 

구글링하면서 생각해보니 예전에

vue 라우터 개발시에 alias로 비슷한 개발을 진행했던것이 기억이나 alias로 선언하면 될 줄 알았다.

 

하지만 개발을 진행해야되는 계속해서 워닝이 발생하여 라우팅이 되지 않았다.

Alias should have the exact same param named

개발을 진행해야되는 라우터의 경우 파라미터가 다른데..!!!어떻게 처리해야될까 싶어 계속 서치하다

 

localization 작업시에 커스텀 라우터를 선언하는 것을 스쳐지나가듯 본적이 있던거 같아 바로 검색해보니

역시나 있었다 다행이다..🙏

 

없었다면 그냥 동일 페이지에서 컴포넌트로 분리해서 작업해야되나 싶었는데 감사합니다

 

nuxt hook 중에 pages:extend 라는 훅을 사용하면 된다.

해당 훅은 nuxt.config.ts에서 정의하면된다. 

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(routes) {
      routes.push({
        name: 'router_name',
        path: '/router/:id/:param',
        file: resolve(__dirname, 해당 컴포넌트 위치)
      })
    }
  },