Nuxt生成多个动态路由类别

问题描述 投票:0回答:1

我正在使用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:{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
}
vue.js nuxt.js
1个回答
0
投票

我设法通过从generate对象返回promise来创建多个类别,在该对象中我映射了变量中的每个类别。

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(',');
        })
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.