具有多个动态路由类别的Nuxt生成

Question

我使用Nuxt.js并使用我的nuxt.config.js文件作为静态页面生成动态页面路由。

我使用的是本地的静态products.json文件，而不是位于静态文件夹中的API。现在我可以静态地生成一个动态路由列表。

nuxt.config.js文件

import servers from './static/servers.json'

const dedicatedServers = () => {
        return new Promise(resolve => {
            resolve(servers.dedicatedServers.map(server => `/products/dedicated-servers/${server.id}`))
        })
    }

 generate: {
    routes: dedicatedServers
}

现在我如何向generate对象中添加更多的产品类别？

我尝试添加一个数组，但它在路由上不起作用：

generate:{routes:[dedicatedServers,cloud-servers]}//does not work

我现在尝试创建一个新方法并返回这个方法，但这也不起作用。

nuxt.config.js -不工作

import servers from './static/servers.json'

const dynamicRoutes = async() => {
    let dedicatedServers = () => {
        return new Promise(resolve => {
            resolve(servers.dedicatedServers.map(server => `/products/dedicated-servers/${server.id}`))
        })
    }
    const cloudServers = () => {
        return new Promise(resolve => {
            resolve(servers.cloudServers.map(server => `/products/cloud-servers/${server.id}`))
        })
    }
    const routes = dedicatedServers;
    return routes;
}


    generate: {
        routes: dynamicRoutes
}

Answer 1

我通过返回generate对象的承诺来创建多个类别，在这个对象中，我映射了变量中的每个类别。

generate: {
    routes: function () {
        let dedicatedServers = servers.dedicatedServers.map(server => `/products/dedicated-servers/${server.id}`)
        let cloudServers = servers.cloudServers.map(server => `/products/cloud-servers/${server.id}`)
        return Promise.all([dedicatedServers, cloudServers]).then(values => {
            return values.join().split(',');
        })
    }
}