生成动态 Nuxt 路由时出错：TypeError: Cannot read property '_normalized' of undefined答案

【问题标题】：Error when generating dynamic Nuxt routes: TypeError: Cannot read property '_normalized' of undefined生成动态 Nuxt 路由时出错：TypeError: Cannot read property '_normalized' of undefined
【发布时间】：2019-12-05 16:40:09
【问题描述】：

首先，没有to 属性，我没有任何nuxt-links。

现在，我有这样的路线

/blog/{类别}
/blog/tag/{tag}
/blog/{category}/{post}

我的nuxt.config.js 文件中有这个：

    generate: {
        routes: function() {
            return Promise.all([
                axios.get('https://api.example.com/categories').then(res => {
                    return res.data.map(category => {
                        return {
                            route: '/blog/' + category.slug,
                            payload: category
                        }
                    })
                }),
                axios.get('https://api.example.com/tags').then(res => {
                    return res.data.map(tag => {
                        return {
                            route: '/blog/tag/' + tag.slug,
                            payload: tag
                        }
                    })
                }),
                axios.get('https://api.example.com/posts').then(res => {
                    return res.data.map(post => {
                        return {
                            route: `/blog/${post.category.slug}/${post.slug}`,
                            payload: post
                        }
                    })
                })
            ])
        }
    },

当我运行yarn generate 时，它开始良好，然后在结束时输出标题中的错误，但它不会取消执行。这是整个错误：

 ERROR   undefined                                                                                                                          20:47:14  

TypeError: Cannot read property '_normalized' of undefined
    at normalizeLocation (C:\Users\...\Code\myproject\mysite\node_modules\vue-router\dist\vue-router.common.js:1297:12)
    at VueRouter.resolve (C:\Users\...\Code\myproject\mysite\node_modules\vue-router\dist\vue-router.common.js:2627:18)
    at He (webpack/bootstrap:2:0)
    at async t.default (webpack/bootstrap:2:0)

如何为静态主机正确生成动态路由？这似乎很麻烦。

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

我承认我以前没有这样做过，但根据docs，看起来您可能需要返回一个数组。您的承诺将解析为数组数组。也许是这样的：

const buildRoutes = async () => {
  const [r1, r2, r3] = await Promise.all([
    axios.get('https://api.example.com/categories').then(res => {
      return res.data.map(category => {
        return {
          route: `/blog/${category.slug}`,
          payload: category,
        };
      });
    }),
    axios.get('https://api.example.com/tags').then(res => {
      return res.data.map(tag => {
        return {
          route: `/blog/tag/${tag.slug}`,
          payload: tag,
        };
      });
    }),
    axios.get('https://api.example.com/posts').then(res => {
      return res.data.map(post => {
        return {
          route: `/blog/${post.category.slug}/${post.slug}`,
          payload: post,
        };
      });
    }),
  ]);

  return [...r1, ...r2, ...r3];
};

然后：

generate: { routes: buildRoutes }

【讨论】：

我会试一试并报告。谢谢！

【解决方案2】：

据我所知，David 是对的，它需要是一个数组。我遇到了同样的问题，数组数组不被接受。

在从两个不同的端点获取之后，我将axios.all 提供的数组连接到更下方。使用的 API 是 Jsonplaceholder，获取 100 个帖子和 5000 张照片。

希望这会有所帮助。

generate: {
    async routes() {
      const baseURL = 'https://jsonplaceholder.typicode.com'

      function postRoutes() {
        return axios
          .get(baseURL + '/posts')
          .then((r) => r.data.map((post) => `post/${post.id}`))
      }

      function photoRoutes() {
        return axios
          .get(baseURL + '/photos')
          .then((r) => r.data.map((photo) => `photo/${photo.id}`))
      }

      const response = await axios
        .all([postRoutes(), photoRoutes()])
        .then(function(results) {
          const merged = [].concat(...results)
          return merged
        })
      return response
    }
  },

【讨论】：