首先,我没有nuxt-link
属性的to
个。
现在,我有这样的路线
我的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)
如何正确生成静态路由的动态路由?这似乎很麻烦。
答案 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
}
},