1

我有一个 nuxt/vue 应用程序，使用 apollo 在 Wordpress 上查询 WPGraphQL。我很难在我的索引页面上设置我的 nuxt-link 以路由到我的 _slug.vue 页面。如果我使用帖子的 slug 在浏览器上手动输入 url，我可以呈现我想要的数据。在我的索引页面中，如何使用带有参数的 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 的正确 url，它就能够呈现：

<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”中的什么？

4

1 回答 1

1

如果您的索引页面正确显示帖子列表，那么您只需稍微调整 url。

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

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

于 2020-11-11T10:55:04.263 回答