從數據 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,
 },

理想情況下，這將為每部手機以及 model 創建一個頁面並制作頁面？

這是使用 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 配置的generate.routes function 。 此示例使用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 的每個配置創建一個頁面。 要為每個品牌或每個 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) }
}

截至我上次使用它時，由於 Nuxt 當前處理 static 生成的方式，需要檢查 asyncData 中的payload屬性。 請參閱此問題以獲取解釋。