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
      }))
    }
  }
}

这将为品牌，型号和内存的每种配置创建一个页面。要只为每个品牌或每个型号制作一个页面，只需为所需的页面添加其他{ 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问题。

从数据NuxtJS创建动态路由

1 个答案: