根据路径获取动态 Nuxt 内容

Question

我的 nuxt 项目中有这样的文件夹结构：

...
/pages/_slug.vue
/content
  /report
    page1.json
    /doc
      page2.json

在我的页面文件夹中有一个 _slug.vue 文件

<template>
  <div>{{ profile.hello }}</div>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const profile = await $content('report', params.slug, { deep: true }).fetch()
    return { profile }
  }
}
</script>

当我访问 /page1 时一切正常，但是当我请求 /doc/page2 时没有页面呈现。现在我很困惑，因为我添加了 { deep:true } 来实现这种行为，但这不起作用。如何确保文件夹结构与我的路线相似？

Answer 1

如果你设置pages/_.vue并在其中写入此内容，它应该可以正常工作

<template>
  <div>{{ profile.hello }}</div>
</template>

<script>
export default {
  async asyncData({ $content, route }) {
    const profile = await $content('report', route.fullPath, { deep: true }).fetch()
    return { profile }
  },
}
</script>

由于使用了 Unknown Dynamic Nested Routes。

此解决方案使用以下 $content('articles', params.slug) 模式并将其转换为 /articles/${params.slug}，如 documentation.

部分所示

根据路径获取动态 Nuxt 内容

Dynamic Nuxt content fetching depending of the path

nuxt.js

nuxt-content