小编Rya*_*ley的帖子

你如何在 Nuxt JS (SSR) 中使用无头 CMS 的路由?

问题

我正在尝试使用 CMS 定义的路由来获取内容,这些内容用于确定在我们的 Nuxt 前端加载哪个页面。那么,您如何实现自己的逻辑来将路由连接到内容,将内容连接到页面,同时保持 Nuxt 页面的所有出色功能?

任何帮助将不胜感激!

上下文

Headless CMS 正在兴起,我们希望在通用模式 (SSR) 下将我们的 CMS 与 Nuxt 一起使用。

我们一直在使用 Umbraco(一种免费托管的 CMS),它具有灵活的路由系统,我们无法在没有大量用户强烈反对的情况下对其进行限制。

注意:Umbraco 不是无头的,我们自己在 GitHub 上Umbraco Headrest 项目中添加了该功能

注意:每条内容都有一个包含其内容类型名称的字段

例如,以下内容结构是有效的。

.
home
??? events
|   ??? event-one
|   ??? event-two
|       ??? event-special-offer
|       ??? some-other-content
??? special-offer
??? other-special-offer
Run Code Online (Sandbox Code Playgroud)

因此,如果我们想用 nuxt 呈现这些特价商品,我们将需要使用 Pages/SpecialOffer.vue。

问题

问题是这些特价商品的默认路径是:

  • /special-offer
  • /other-special-offer
  • /events/event-two/event-special-offer

编辑器还可以创建自定义路径,例如:

  • /holiday2020/special(可以指向event-special-offer

编辑器还可以重命名内容,因此other-special-offer可以变成new-special-offer. 然后一把umbraco将返回new-special-offer两个 …

umbraco url-routing server-side-rendering nuxt.js headless-cms

9
推荐指数
1
解决办法
796
查看次数