API 对此做出回应。$route.params.slug

Question

我正在使用 vue-router link 从一个 'index' 页面列出资源记录，我有一个路由器-link 可以带你到一个个人记录的页面。该路由工作正常，但我无法仅通过该记录的 API 响应。

在控制台中我得到一个 404:

GET http://localhost:8080/this.$route.params.slug 404 (Not Found)

在 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
    }
  ]
})

component/GinsShow.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>

Answer 1

你有一个你不应该的字符串：

axios.get('this.$route.params.slug')

应该是

axios.get(this.$route.params.slug)

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

axios.get('/resource/' + this.$route.params.slug)

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

API 对此做出回应。$route.params.slug

API response with this.$route.params.slug

vue.js

vue-router

axios