Nuxt-在动态路由中访问异步数据

Question

我在处理Nuxt动态路由中的异步数据时遇到问题。

文件夹结构示例，

我的异步数据

async asyncData({context, error, req}) {
  try {
    const api = await Prismic.getApi(PrismicConfig.apiEndpoint, {req})

    let document = []
      const result = await api.getByUID('news', this.$route.params.slug)
      document = result.results

    return {
      document,
      documentId: result.id,
    }
  } catch (e) {
      error({ statusCode: 404, message: 'Page not found' })
    }
}, 

所以我总是以找不到404页面结尾。我尝试了其他异步数据示例，这些示例在正常的“非动态路由”上都可以正常运行，并且还返回404。

我假设这是与Nuxt组件中的异步数据相关的问题，而这正是Nuxt将在3.0版中处理的问题吗？

但是直到那时，如果您能帮助我，我将不胜感激，我需要以某种方式进行这项工作。

我将Prismic用作无头API cms。

Answer 1

这里的问题是，您不能在异步函数中使用“ this”。完成所需操作的方法是使用nuxt https://nuxtjs.org/api/context提供的'params'上下文，这将允许您将uid传递给查询。您可以在下面查看如何执行此操作。

async asyncData({ params, error, req }) {
  try{
    // Query to get API object
    const api = await Prismic.getApi(PrismicConfig.apiEndpoint, {req})

    // Query to get content by 'news' type and whatever the uid for the document is
    const result = await api.getByUID("news", params.uid)

    // Returns data to be used in template
    return {
      document: result.data,
      documentId: result.id,
    }
  } catch (e) {
    // Returns error page
    error({ statusCode: 404, message: 'Page not found' })
  }
},

对于您的文件结构，您也不需要_slug文件夹，您只需将新闻文件夹中的index.vue重命名为_uid.vue即可： 新闻/   _uid.vue

您可以在这里查看我们在Prismic建立的完整博客： https://user-guides.prismic.io/examples/create-a-sample-blog-with-prismic-and-nuxtjs