尝试使用Nuxt，Apollo和WPGraphQL渲染_slug.vue页面时，无法使nuxt-link工作

如何解决尝试使用Nuxt，Apollo和WPGraphQL渲染_slug.vue页面时，无法使nuxt-link工作

我有一个使用apollo在wordpress上查询WPGraphQL的nuxt / vue应用程序。我很难在索引页面上设置我的nuxt链接以路由到_slug.vue页面。如果我使用帖子的标签在浏览器中手动输入网址，则可以呈现所需的数据。在我的索引页面中，如何使用带参数的post.slug来呈现_slug.vue页面？

这是我的GraphQL查询：

  post(id: $slug,idType: SLUG) {
    title
    slug
    date
    id
    content(format: RENDERED)
    author {
      node {
        firstName
        lastName
      }
    }
  }
}

我的/blog/index.vue页面包含博客文章列表，我正在尝试使用nuxt-link链接每个文章以呈现_slug.vue：

<template>
  <div class="blog">
    <h1 class="blog__title">Blog</h1>
    <nuxt-link
      v-for="post in posts.nodes"
      :key="post.slug"
      :to="'blog/' + { params: { slug: post.slug } }"
      class="blog__post"
    >
      <h3 class="blog__post-title">
        {{ post.title }}
      </h3>
      <div class="blog__post-content" v-html="post.content" />
    </nuxt-link>
  </div>
</template>

<script>
import getPostByID from '~/apollo/queries/GetPostByID'

export default {
  data() {
    return {
      posts: [],query: ''
    }
  },apollo: {
    posts: {
      prefetch: true,query: getPostByID,update: (data) => data.post
    }
  }
</script>

在下面的_slug.vue文件中，它使用与我的博客页面相同的查询，并且如果在浏览器中键入带有slug的正确网址，则能够呈现：

<template>
  <article class="post">
    <h1>{{ post.title }}</h1>
    <div class="blog__post-content" v-html="post.content" />
  </article>
</template>

<script>
import GetPostByID from '~/apollo/queries/GetPostById'

export default {
  data() {
    return {
      post: []
    }
  },apollo: {
    post: {
      prefetch: true,query: GetPostByID,variables() {
        return { slug: this.$route.params.slug }
      }
    }
  }
}
</script>

“。slug”到底是从“ this。$ route.params.slug”中指的是什么？

解决方法

如果您的索引页正确显示了帖子列表，那么您只需要稍微调整网址即可。

<nuxt-link
  v-for="post in posts.nodes"
  :key="post.slug"
  :to="'blog/' + { params: { slug: post.slug } }"
  class="blog__post"
>

应该是：

<nuxt-link
  v-for="post in posts.nodes"
  :key="post.slug"
  :to="`blog/${post.slug}`"
  class="blog__post"
>

this.$route.params.slug指通过创建动态文件_slug.vue命名的url参数。因此，如果您有pages/blog/_slug.vue并导航到your-app.com/blog/my-first-post，则my-first-post是访问this.$route.params.slug时返回的参数字符串。

Slug不是一个神奇的关键字，它可以是任何关键字，并且取决于您在Blog目录中创建的文件名。给定相同的URL和pages/blog/_unicorn.vue，您将调用this.$route.params.unicorn返回my-first-post。