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

Question

我有一个很简单的问题。

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

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

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

非常感谢你的帮助！

Answer 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;
    }
}