Nuxt는 .json 파일 데이터를 기반으로 동적 페이지를 생성합니다.

Nuxt는 .json 파일 데이터를 기반으로 동적 페이지를 생성합니다.

나는 꽤 쉬운 문제를 안고 있다.

내 nuxt 앱에서는 배열 내의 오브젝트를 기반으로 한 아이템 목록을 단순한 .json 파일로 표시하고 싶다.또한 특정 항목을 클릭하면 해당 항목에 대한 상세 보기를 더 많은 데이터로 표시하고 싶습니다.자동차에 대한 목록이라고 상상해 보십시오. 역동적인 경로는 "cars/ford-500"과 같습니다.

vuex 변수를 입력하여 다이내믹루트 컴포넌트에 표시하면 클라이언트에 의해 로드되기 때문에 SEO의 이점을 얻을 수 없습니다.또한 동적 링크를 사용하여 페이지를 새로 고치고 싶은 경우 새로고침 후 스토어가 삭제되므로 오류가 발생합니다.다른 옵션은 루트 파라미터를 전달하는 것이지만 새로고침 시 오류가 발생합니다.

기본적으로 100개의 html 페이지를 만들고 싶지 않습니다.nuxt-generate에 의해 .json 파일이 자동으로 처리되도록 하고 다이내믹루트를 새로고침할 때 해당 목록 항목의 특정 데이터를 표시합니다.nuxt-generate는 다이내믹 패스를 참조하지 않지만 설정 파일에는 nuxt-generate 속성을 사용하여 루프 스루를 지시할 수 있습니다.

도와주셔서 정말 감사합니다!

Nuxt.js에서 다이내믹 파라미터가 있는 루트를 생성하는 경우 generate.routes 속성을 다이내믹루트 배열로 설정해야 합니다.

URL 의 리스트가 있는 경우는, 다음과 같이 실행할 수 있습니다.

 // nuxt.config.js

 generate {
    routes () {
      // You can also import this from a js file.
      const yourUrls = ['ford-500', 'porche-spyder', 'mclaren-senna', 'volkswagen-beetle'];
      const routesToGenerate = [];

      for (const url of yourUrls) {
        const newRoute = '/cars/' + url;
        routesToGenerate.push(newRoute);
      }

      return routesToGenerate;
    }
}

물론 .json 파일도 사용할 수 있습니다.

 // nuxt.config.js

 generate {
    routes () {
      const routesToGenerate = [];

      for (const urlKey of Object.keys(yourJsonFile)) {
        const newRoute = '/cars/' + yourJsonFile[urlKey];
        routesToGenerate.push(newRoute);
      }

      return routesToGenerate;
    }
}

필요한 경우 생성하는 컴포넌트에 페이로드를 전달할 수도 있습니다.상세한 것에 대하여는, 이쪽의 메뉴얼을 참조해 주세요.(https://nuxtjs.org/api/configuration-generate/ #filengthttp://filename)

Nuxt-i18n

nuxt-i18n과 같은 국제화 모듈을 사용하는 경우 로케일 프리픽스를 수동으로 정의해야 합니다.

 // nuxt.config.js

 generate {
    routes () {
      // You can also import this from a js file.
      const yourUrls = ['ford-500', 'porche-spyder', 'mclaren-senna', 'volkswagen-beetle'];
      const yourLocales = ['da-DK', 'en', 'de']
      const routesToGenerate = [];

      for (const url of yourUrls) {
        const defaultRoute = '/cars/' + url;
        routesToGenerate.push(defaultRoute);
            for (const locale of yourLocales) {
                const localeRoute = locale + '/cars/' + url;
                routesToGenerate.push(localeRoute);
            }
      }

      return routesToGenerate;
    }
}

언급URL : https://stackoverflow.com/questions/55078318/nuxt-generate-dynamic-pages-based-on-json-file-data