根据路径动态获取Nuxt内容 [英] Dynamic Nuxt content fetching depending of the path

问题描述

我的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 }来实现此行为，但这不起作用。如何确保文件夹结构与我的路由相似？

推荐答案

如果您设置了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内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！