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

【问题标题】：Can't get nuxt-link to work when trying to render _slug.vue page with Nuxt, Apollo and WPGraphQL尝试使用 Nuxt、Apollo 和 WPGraphQL 渲染 _slug.vue 页面时无法使 nuxt-link 工作
【发布时间】：2021-02-23 02:29:25
【问题描述】：

我有一个 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>

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

【问题讨论】：

标签： vue.js nuxt.js apollo wp-graphql

【解决方案1】：

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

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

【讨论】：