Nuxt 根据 .json 文件数据生成动态页面

Posted 2023-02-22

【中文标题】Nuxt 根据 .json 文件数据生成动态页面

【英文标题】：Nuxt generate dynamic pages based on .json file data

【发布时间】：2019-07-31 09:03:50

【问题描述】：

我遇到了一个相当简单的问题。

在我的 nuxt 应用程序中，我想在一个简单的 .json 文件中显示基于数组中对象的项目列表。此外，当单击特定项目时，我想显示该项目的详细视图以及更多数据。想象它是一个关于汽车的列表，动态路线看起来像：“cars/ford-500”。

现在，如果我填充一个 vuex 变量并将其显示在动态路由组件中 - 我没有获得 SEO 好处，因为它是由客户端加载的。此外，如果我想用动态链接刷新页面，我会收到错误，因为刷新后商店被删除。另一种选择是传递一个路由参数，但在刷新时我再次收到错误消息。

基本上我不想创建 100 个 html 页面，我只想让 nuxt-generate 使用我的 .json 文件自动完成它，并且我想在重新加载动态路由时显示该列表项的特定数据。我知道 nuxt-generate 不查看动态路径，但配置文件中有一个 nuxt-generate 属性可以用来告诉他们循环。

非常感谢您的帮助！

【参考方案1】：

如果希望 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/#routes)

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;