生成动态Nuxt路由时出错:TypeError:无法读取未定义的属性'_normalized'

时间:2019-07-27 19:00:25

标签: javascript vue.js nuxt.js

首先,我没有nuxt-link属性的to个。

现在,我有这样的路线

  • / blog / {category}
  • / 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)

如何正确生成静态路由的动态路由?这似乎很麻烦。

2 个答案:

答案 0 :(得分: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 }

答案 1 :(得分:1)

据我所知,大卫是对的,它必须是一个数组。我有一个同样的问题,就是数组的数组不被接受。

在从两个不同的端点获取之后,我将由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
    }
  },