javascript - Nuxt - 动态路由生成返回状态 400

Question

我正在为我的应用程序使用 Nuxt，并希望将其连接到我的服务器以获取数据。

为了生成动态路由，我使用了内置的 generate 方法，但我遇到了一些问题。

当使用生成命令时，它会得到这个ERROR Request failed with status code 400，但是当我访问相同的 URL 时它工作正常。此外，当我控制台记录每个单独的路线时，它会正确显示。

代码：

generate: {
    routes() {
        return axios.get('https://api-mcl.herokuapp.com/api/v1/companies').then(res => {
            return res.data.data.map(company => {
                return { route: `/companies/${company.slug}` }
            })
        })
    }
}

截屏：

非常感谢任何帮助！

标签： javascriptvue.jsnuxt.js

Answer 1

弄清楚了。

问题在于组件中的 asyncData 函数。

函数是这样的：

async asyncData({ $axios, params }) {
    const { data } = await $axios.get(`/companies/${params.id}`)
    return { company: data.data }

但我应该像这样使用有效载荷：

async asyncData({ $axios, payload, params }) {
    if (payload) {
        return { company: payload }
    } else {
        const { data } = await $axios.get(`/companies/${params.id}`)
        return { company: data.data }
    }
}