Vue.js API对此的响应。$route.params.slug

我正在使用vue路由器从列出资源记录的“索引”页面链接，并且我有一个路由器链接可以将您带到单个记录的页面。该路由工作正常，但我无法仅针对该记录完成API响应

在控制台中，我得到一个404：

获取$route.params.slug 404（未找到）

在Devtools中，我的数组为空

$route errors:Array[1]0:Error-gin:Array[0]

router.index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Gins from '@/components/Gins'
import GinsShow from '@/components/GinsShow'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/gins',
      name: 'Gins',
      component: Gins
    },
    {
      path: '/gins/:slug',
      name: 'Gin-Show',
      component: GinsShow
    }
  ]
})

组件/ginshow.vue

<template>
    <div id="Gin-Show">
        <div class="container mx-auto pt-16 p-8">
            <h1 class="font-black tracking-wide uppercase mb-8">{{gin.name}}</h1>
                <div class="flex flex-wrap">

                </div>
        </div>
    </div>

</template>
<script>

import axios from 'axios'

export default {
    name: 'Gin-Show',
    data() {
        return {
            gin: [],
            errors: []
        }
    },


    created() {
        axios.get('this.$route.params.slug')
        .then(response => {
            this.gin = response.data
        })
        .catch(e => {
            this.errors.push(e)
        })
    }
}
</script>

<style>

</style>

{{gin.name}
从“axios”导入axios
导出默认值{
名称：“杜松子酒秀”，
数据（）{
返回{
杜松子酒：[]，
错误：[]
}
},
创建（）{
get（'this.$route.params.slug'）
。然后（响应=>{
this.gin=response.data
})
.catch（e=>{
此.errors.push（e）
})
}
}

您有一个字符串，不应该：

axios.get（'this.$route.params.slug'）

应该是

axios.get（此.$route.params.slug）

您可能需要使用slug参数构造URL，因此我希望它是这样的：

axios.get（'/resource/'+this.$route.params.slug）

---

但这取决于您的API服务器。

您有一个字符串，不应该：

axios.get（'this.$route.params.slug'）

应该是

axios.get（此.$route.params.slug）

您可能需要使用slug参数构造URL，因此我希望它是这样的：

axios.get（'/resource/'+this.$route.params.slug）

---

但这取决于您的API服务器。

啊，是的，好的。因此，更新到

axios.get（'/gins/'+this.$route.params.slug）

让我更进一步，但仍然无法正确渲染。我的控制台错误现在是

GEThttp://localhost:8080/gins/gunpowder 404（未找到）

所以我至少可以看到slug在URL中。现在听起来像是服务器端的错误。API中有有效的路由吗？明白了<代码>'http://localhost:3000/gins/“+this.$route.params.slug+”.json“成功了。啊，是的，好的。因此，更新到

axios.get（'/gins/'+this.$route.params.slug）

让我更进一步，但仍然无法正确渲染。我的控制台错误现在是

GEThttp://localhost:8080/gins/gunpowder 404（未找到）

所以我至少可以看到slug在URL中。现在听起来像是服务器端的错误。API中有有效的路由吗？明白了<代码>'http://localhost:3000/gins/“+this.$route.params.slug+”.json“成功了。