javascript - 来自 api 的 Nuxt 动态路由

Question

我在 nuxt.config.ts 中遇到 extendRoutes 问题

当我构建我的 nuxt 并生成页面时，我希望我的路由器根据 api 调用知道哪个组件去哪条路径..

所以在 Nuxt.config.ts 中我这样做:

 router: {
  extendRoutes(routes resolve){
    cms.getRoutes().then(x => { <-- this returns an array from api call with objects needed for path
       for(var i = 0; i < x.items.lenth; i++){
         routes.push({
            name: x.items[i].name,
            component: component: resolve(__dirname, `pages/index.vue`), <- this is just and ex. of comp.
            path: x.items[i].slug,
         });
       }
    })
  }
}

这会创建一个无限循环，因为但我不等待响应。但是，如果我使用 async/await，我会收到一个 nuxt 错误，提示“routes.forEach 不是一个函数”。

这是异步版本:

async extendRoutes(routes: any, resolve: any) {

        await cms.GetSitemap().then((x: any) => {
            for(var i = 0; i < x.items.lenth; i++){
             routes.push({
               name: x.items[i].name,
               component: component: resolve(__dirname, `pages/index.vue`),
               path: x.items[i].slug,
             });
        });
    }

这会在我尝试构建时立即出现此错误:

Answer 1

嗯，这不是使用 async/await 的方式。它应该消除 .then() 链接，但您仍然在这里使用它。像这样尝试:

router: {
  async extendRoutes(routes, resolve) {
    let x = await cms.getRoutes();
    for (var i = 0; i < x.items.length; i++) {
      routes.push({
        name: x.items[i].name,
        component: resolve(__dirname, `pages/index.vue`),
        path: x.items[i].slug
      });
    }
  }
};