根据路径获取动态 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 部分所示。