Axios GET 请求失败，状态码 404

Question

我正在尝试构建（使用vue.js）一个博客/文章应用程序，它使用axios 从我的db.json 文件和get request 请求数据。一旦从主要文章列表中单击它，我希望它显示该文章的数据==> 我使用id prop，以便它知道要获取哪篇文章的数据。这里我调用了我的 get 请求（get 请求在另一个文件中，请继续阅读）。

ArticleShow.vue
<script>
import APIService from "@/APIService.js";
export default {
  props: ["id"],    // "id" has been passed as a prop when I import this file to its parent
  data() {
    return {
      article: {}
    };
  },
  created() {
    APIService.getArticle(this.id).then(response => {
      this.article = response.data;
    });
  }
};
</script>

这是我使用的 axios GET 请求（在 APIService.js 文件中）

APIService.js
import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://localhost:5000",
  withCredentials: false,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  }
});

export default {
  getArticle(id) {
    return apiClient.get("/articles/" + id);
  }
}

我认为这段代码可以工作，但在我的浏览器中出现以下错误：

GET http://localhost:5000/articles/undefined 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:62)

我尝试捕捉错误，但我无法获得任何有用的信息，说明它来自何处以及如何修复它。我想这可能是导致问题的id prop，但不确定。在ArticleShow 组件的父级中，当在路由器链接中显示ArticleShow 时，我定义了id prop。

ArticleCard.vue
<router-link
      class="article-link"
      :to="{ name: 'ArticleShow', params: { id: article.id } }"
      :article="this.article"
    >

然后又在Articlecard.vue（前一个组件）的父级中

Home.vue
<ArticleCard
      v-for="article in articles"   // I imported *articles* from the vuex store
      :key="article.id"
      :article="article"
      class="ArticleCard"
></ArticleCard>

仍然不确定id prop 是否真的是问题的根源。无论如何，如果您可以解决这个问题，请提供帮助，因为它已经持续了很长时间，非常感谢任何帮助。

Answer 1

错误 404 表示此 URL 不存在：http://localhost:5000/articles/undefined

所以这意味着你没有将任何 id 属性传递给 ArticleShow 组件