在nuxt生成的html中添加静态文本

Question

我有一个nuxt应用，我想为我所有的路线创建静态html文件。

我成功生成了我的静态文件。

所以nuxt generate运行后，我有这些文件夹中带有index.html：

• 购买/苹果
• 购买/橙色
• 购买/香蕉

我的问题在这里。

在我的页面中，我想要这个：

<h1>Buy {{fruit_name}}</h1>

而且我希望fruit_name在生成的html文件上是静态的。

例如对于苹果我想要的最终HTML：

<h1>Buy apple</h1>

暂时apple为空。

所以我应该怎么做才能在生成时间上基于路由名称设置此变量。

假设我的路线是恒定的，并且我将路线设置为nuxt.config.js

UPDATE

我尝试在生成的html文件中更改它们，但是在我提供服务时，更改不会应用。为什么？

Answer 1

我找到了解决方法：

生成路线时，将有效载荷传递到相关页面：

{
  route: `/fruit/${name}`,
  payload: { fruitName: name }
},

并在asyncData挂钩中设置数据：

async asyncData({ params, error, payload }) {
  if (payload) {
    return {
      name: payload.name
    }
  }
}

这里是组件中的数据集，可以通过组件访问它，它是静态的，并且在每个路由的生成的html文件中设置。