Question

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

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

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

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

非常感谢您的帮助！

Answer 1

如果希望Nuxt.js生成带有动态参数的路由，则需要将generate.routes属性设置为动态路由数组。

如果您有包含网址的列表，则可以这样操作：

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

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

1 个答案:

Nuxt-i18n