Nuxt vue-router如何动态路由到页面

Question

我在页面中得到了以下结构

pages/
pages/portfolio
pages/portfolio/_detail/
pages/contact

如果我导航到/portfolio的URL中，一切都很好。

然而，我从CMS加载我的URL，如果用户想要重命名他的portfolio slug并联系到例如slug: myportfolio，slug: contact-me，那么URL将不匹配。因此，在CMS中创建slug的自由度较小。

我现在可以从我的API加载哪种类型的页面。每个页面都有一种类型的页面。我想要的是匹配slug和类型，然后加载页面。因为应用程序接口(CMS headless wagtail)会给出[...{type: 'portfolio.PorfolioIndexpage', slug: 'myportfolio'} ... {type: 'contact.ContactPage'} ...]

所以理想情况下，我想写这样的东西。

因此，url将为/[slug]/，但要呈现的页面将为<nuxt-link :to="{name: slug, page: type}">

有人能就如何实现这一点给出一些有见地的建议吗？

Answer 1

显然，这有点简单。

你需要这样设置你的文件夹结构。

/pages/_portfolio
/pages/_portfolio/index.vue

然后你可以像下面这样做你的链接。

<nuxt-link :to={name: 'portfolio', params:{portfolio: 'whatever-name-slug'}></nuxt-link>