从data NuxtJS创建动态路由

Question

如何在Nuxt中将此数据转换为以下路由，我可以从示例中看出，使用唯一的id很容易，但对于make/model这样的非唯一数据，这是否可行？

/_make/_model/_memory

例如

/Apple/iPhone-8/64GB

数据：

 {
    "id": 1,
    "make": "Apple",
    "model": "iPhone 8",
    "memory": 64,
 },
 {
    "id": 2,
    "make": "Apple",
    "model": "iPhone X",
    "memory": 64,
 },
 {
    "id": 3,
    "make": "Samsung",
    "model": "S20",
    "memory": 128,
 },

理想情况下，这将为每个手机创建一个页面，以及模型和制作页面？

这是使用axios的正确方式吗？

  generate: {
    routes() {
      return axios.get(`${process.env.API_URL}/phones`)
      .then((res) => {
        return res.data.map((phone) => {
          return {
            route: `/${phone.makeCanonical}/${phone.modelCanonical}/${phone.memory}GB`,
            payload: phone
          }
        })
      })
    }
  },

Answer 1

查看Nuxt config的generate.routes函数。此示例使用payload返回属性来加快速度。

const data = [
  {
    id: 1,
    make: 'Apple',
    model: 'iPhone 8',
    memory: 64
  },
  {
    id: 2,
    make: 'Apple',
    model: 'iPhone X',
    memory: 64
  },
  {
    id: 3,
    make: 'Samsung',
    model: 'S20',
    memory: 128
  }
]

export default {
  generate: {
    routes() {
      return data.map(item => ({
        route: `/${item.make}/${item.model}/${item.memory}`,
        payload: item
      }))
    }
  }
}

这将为make、model和memory的每个配置创建一个页面。要为每个make或每个模型创建一个页面，您只需要为您想要的页面添加额外的{ route, payload }对象。当然，您还需要设置页面组件来处理您返回的每个route。

然后，在您的页面组件中：

async asyncData ({ params, error, payload }) {
    if (payload) return { phone: payload }
    else return { phone: await backend.fetchPhone(params.make, params.model, params.memory) }
}

由于Nuxt当前处理静态生成的方式，我上次使用它时，需要检查asyncData中的payload属性。有关说明，请参阅this问题。