Nuxt.js의 중첩된 경로에 선택적 파라미터를 생성하는 방법?

Nuxt.js의 중첩된 경로에 선택적 파라미터를 생성하는 방법?

nnxt.js 앱에서 다음과 같은 중첩된 경로가 있다.route-1/route-2/route-3

다음에 선택적 매개 변수를 추가하려는 경우route-1동일한 이전 경로를 렌더링하지만 추가 정보(일반 ID 또는 이와 유사한 정보)를 사용하여 2개의 경로 형식으로 매핑됨

route-1/:param/route-2/route-3또는route-1/route-2/route-3

폴더 구조를 복제하지 않고

매개 변수 이름으로 파일을 추가할 경우 필수 매개 변수가 되고 이 매개 변수가 없는 폴더 구조를 복제하여 두 가지 시나리오를 처리해야 함

이걸로 해결한 내 경우.페이지 트리가 있어

pages/
--| search/
----| index.vue
--| index.vue

나는 검색 페이지에서 선택적인 '카테고리' 매개변수가 필요하다.나는 다음과 같이 노선을 연장할 것이다.

// nuxt.config.js

export default {
  router: {
    middleware: [...],
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'search-category',
        path: '/search/:category',
        component: resolve(__dirname, 'pages/search/index.vue'),
        chunkName: 'pages/search/_category/index'
      })
    }
  }
}

다음 항목으로 이동하면/search또는/search/my-category이것은 두 경우 모두 같은 페이지를 렌더링하고, 두 번째 경우 나는 그 값을 갖는다.my-category에$route.params.category:)

당신의 경우, 아마도 다음과 같은 것이 있을 것이다.

// nuxt.config.js

export default {
  router: {
    middleware: [...],
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'my-new-route',
        path: '/route-1/:param/route-2/route-3',
        component: resolve(__dirname, 'pages/same-route/index.vue'),
        chunkName: 'pages/same-route/_param/index'
      })
    }
  }
}

BTW:chunkName만약 당신이 사용한다면 필요하다nuxtI18n플러그인, 그리고 이 플러그인에서 동적 경로에 대한 구성은 (나의 경우):

// nuxt.config.js

export default {
  i18n: {
    pages: {
      'search/index': { // <-- route in pages tree
        es: '/buscar',
        en: '/search'
      },
      'search/_category/index': { // <-- dynamic route configured
        es: '/buscar/:category',
        en: '/search/:category'
      }
    }
  }
}

참조URL: https://stackoverflow.com/questions/54958289/how-to-create-an-optional-param-in-nested-routes-in-nuxt-js