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

Question

我有一个相当简单的问题。

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

现在，如果我填充一个 vuex 变量并将其显示在动态路由组件中 - 我没有获得 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;
    }
}