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

Posted 2023-03-10

【中文标题】动态 slug 未使用 graphql 和 nuxt 填充 url

【英文标题】：dynamic slug not populating the url with graphql and nuxt

【发布时间】：2020-08-18 01:47:53

【问题描述】：

我正在使用 Strapi、Graphql 和 Nuxt.js 来获取项目列表，然后根据单击的按钮显示单个项目，该按钮应在路由参数中带有项目名称的小块。

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>

并在项目列表页面上的 Apollo 查询中

apollo: 
    projects: 
      prefetch: true,
      query: projectsQuery,
      variables() 
        return  slug: this.$route.params.slug ;
      
    
  ,

发送到地址栏的是

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

如果我像这样输入蛞蝓

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 
        
    

任何见解都将不胜感激！

【参考方案1】：

所以问题不在于按钮中的“to”绑定 - 冒号丢失并将 slug 更改为 projects.slug

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

感谢 Jeffery Biles https://www.youtube.com/watch?v=NS0io3Z75GI&list=PLPwpWyfm6JACZm5kqu6p4s7XHXbAQ7fP-