动态slug不使用graphql和nuxt填充url

我使用Strapi、Graphql和Nuxt.js获取项目列表，然后根据单击的按钮显示单个项目，该按钮应在route params中包含项目名称的一段代码

Graphql查询如下图所示，如果我在变量中传递一个slug，它将在游乐场中工作

query GetProject($slug: String!) {
  projects(where: {slug: $slug}) {
    id
    name
    slug
  }
}

查询变量

{
  "slug": "tunnel-to-new-york"
}

结果是

{
  "data": {
    "projects": [
      {
        "id": "5ea7904136a59018ac9ffb54",
        "name": "Tunnel to New York",
        "slug": "tunnel-to-new-york"
      }
    ]
  }
}

在“项目”页面中，按钮为

<v-btn to="/projects/`${slug}`">Model + Details</v-btn>

发送到地址栏的是

http://localhost:3000/projects/%60$%7Bslug%7D%60

如果我像这样输入slug

http://localhost:3000/projects/tunnel-to-new-york

错误缺少参数-返回的是数组而不是对象

单个项目查询是

query GetProject($slug: String!) {  
projects(where: {slug: $slug}) {
    id
    name
    slug   } }

在_slug.vue中

apollo: {
    project: {
        prefetch: true,
        query: projectQuery,
        variables () {
            return { slug: this.$route.params.slug }
        }
    }
}

---

任何见解将不胜感激

因此，问题在于没有绑定按钮中的“to”-冒号丢失并将{slug}更改为{projects.slug}

<v-btn :to="`/project/${project.slug}`">Model + Details</v-btn>

模型+细节

---

由于Jeffery Biles

的原因，按钮中的“to”没有绑定，冒号丢失，将{slug}改为{projects.slug}

<v-btn :to="`/project/${project.slug}`">Model + Details</v-btn>

模型+细节

感谢Jeffery Biles