nuxt.js - 根据路径获取动态 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}为文档部分所示。