时间戳

首页 > 解决方案 > 带有 this.$route.params.slug 的 API 响应

vue.js - 带有 this.$route.params.slug 的 API 响应

问题描述

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

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

GET http://localhost:8080/this .$route.params.slug 404（未找到）

从 Devtools，我的数组是空的

$route 错误：数组 [1] 0：错误杜松子酒：数组 [0]

路由器.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
    }
  ]
})

组件/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>

标签： vue.jsaxiosvue-router

解决方案

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

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

应该

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

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

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

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

推荐阅读