从数据中创建动态路由 NuxtJS

Question

如何在Nuxt中把这些数据转换成下面的路由，我从例子中可以看到，如果是唯一的id，是很容易的，但是如果是像makemodel这样不唯一的数据，可能吗？

/_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

查看 generate.routes 的作用 Nuxt配置. 这个例子使用的是 payload return属性来加快工作进度。

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创建一个页面，你只需要添加额外的 { 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) }
}

在我上次使用这个的时候，它需要检查一下 payload 属性，因为Nuxt目前处理静态生成的方式。 参见 这个 问题进行解释。