使用 Strapi i18n 和动态深度路由的 Nuxt 静态页面混合了组件

Question

我使用带有 Nuxt 和 i18n 的 Strapi 来生成一个英语和丹麦语的静态站点。 该网站应该能够生成如下 URL：

mysite.com/
mysite.com/da
mysite.com/news/a-story
mysite.com/da/nyheder/en-historie
mysite.com/cases/a-case
mysite.com/da/case/en-case

我有一个这样的页面文件夹结构

_cases
    _slug.vue <-- for case pages
_news
    _slug.vue <-- for news pages
_slug.vue <-- for other pages
index.vue <-- for my frontpage

我使用以下代码列出呈现良好的漂亮 URL 的链接

h2 case
router-link(:to="localePath({ name: 'cases-slug', params: { cases: $t('slugs.cases'), slug: aCasePage.slug }})") {{aCasePage.title}}
h2 news
router-link(:to="localePath({ name: 'news-slug', params: { news: $t('slugs.news'), slug: aNewsPage.slug }})") {{aNewsPage.title}}

问题是，无论我点击进入新闻页面还是案例页面，都会得到相同的 _cases -> _slug.vue 组件。

查看 .nuxt/router.js 文件，路由似乎生成正确：

routes: [{
    path: "/da",
    component: _1ea75fec,
    name: "index___da"
}, {
    path: "/da/:slug",
    component: _2214a27c,
    name: "slug___da"
}, {
    path: "/da/:cases/:slug?",
    component: _3a25cd77,
    name: "cases-slug___da"
}, {
    path: "/da/:news/:slug?",
    component: _3988eeb6,
    name: "news-slug___da"
}, {
    path: "/",
    component: _1ea75fec,
    name: "index___en"
}, {
    path: "/:slug",
    component: _2214a27c,
    name: "slug___en"
}, {
    path: "/:cases/:slug?",
    component: _3a25cd77,
    name: "cases-slug___en"
}, {
    path: "/:news/:slug?",
    component: _3988eeb6,
    name: "news-slug___en"
}],

如何避免 Nuxt 混淆这些路由？以及与它们匹配的页面 Vue 组件？

Answer 1

您能分享一下 _slug pages 数据获取的解决方案吗？

我正在使用来自 Strapi 的 findOne (slug,_locale:i18n.locale)。它不起作用 所以还是坚持这个问题