Vue项目点击Read More按钮无法显示JSON内容求助

问题根源 #

1. 路由参数类型不匹配：URL里的参数默认都是字符串，但你在PostDetails.vue里把id prop声明为Number类型，导致校验报错。更关键的是，find方法用===匹配时，数字ID和字符串ID不相等，根本找不到对应的文章，所以页面空白。
2. 之前的axios 404其实不是路径问题（public下的posts.json用/posts.json请求是对的），本质还是ID匹配失败导致的。

修复步骤 #

1. 修改路由配置，自动转换ID类型

打开router/index.js，把PostDetails路由的props改成函数形式，自动把路由参数里的字符串ID转成数字：

{
  path: "/post/:id",
  name: "PostDetails",
  component: () => import("../components/PostDetails.vue"),
  // 替换原来的props: true
  props: route => ({ id: Number(route.params.id) })
}

这一步是核心——不管你在router-link里怎么转ID，URL参数始终是字符串，必须在路由层把类型转对，才能满足prop的类型要求，同时让find方法匹配成功。

2. 简化router-link的ID传递（可选）

你的blogPosts里的post.id本来就是数字，所以router-link里的转换可以直接去掉：

<router-link
  :to="{ name: 'PostDetails', params: { id: post.id } }"
  class="btn btn-primary"
>
  Read More
</router-link>

3. 验证详情页的匹配逻辑

现在this.id已经是数字了，和posts.json里的ID类型一致，find方法就能正常找到对应的文章：

this.post = posts.find((post) => post.id === this.id);

关于axios的404问题 #

如果想用axios代替fetch，直接用/posts.json路径就行，示例代码：

import axios from "axios";

// ...

async fetchPostData() {
  try {
    const { data } = await axios.get("/posts.json");
    this.post = data.find(post => post.id === this.id);
  } catch (error) {
    console.error("加载文章失败:", error);
  }
}

这样改完之后，控制台的prop警告会消失，点击Read More就能正常显示对应文章内容了。

内容的提问来源于stack exchange，提问作者Taylor Brown