你的问题主要出在列表组件的路由链接生成逻辑和详情页的数据获取方式上，我来一步步帮你梳理修复：

1. 修复列表组件的跳转路径问题 #

你当前Objects.vue里的router-link包裹了整个v-for循环，还错误地使用this.lists.id生成路径——但lists是一个数组，根本没有id属性，这就导致跳转路径变成了/undefined。

正确的做法是让每个列表项对应独立的路由链接，把v-for绑定到router-link上，用循环中的item.id来生成正确路径：

<template>
  <div id="objects">
    <!-- 每个item对应一个router-link，用item.id生成路径 -->
    <router-link 
      :to="`/${item.id}`" 
      v-for="(item, index) in lists" 
      :key="index"
    >
      <div class="list">{{ item.title }} {{ item.id }}</div>
    </router-link>
  </div>
</template>

另外你在mounted里打印this.lists.id也是错误的，lists是数组，应该打印整个数组或者单个item的属性来验证数据是否加载成功。

2. 修复详情页的数据获取逻辑 #

你的Object.vue尝试请求/static/data.json/' + this.id，但静态JSON文件不是API接口，不能通过这种路径获取单个条目。正确的方式是先获取整个JSON文件，再从中筛选出对应id的对象：

<template>
  <div id="object">
    <div>{{ object.id }}</div>
    <div>{{ object.title }}</div>
  </div>
</template>

<script>
// 这里导入的json可以移除，改用$http获取整个文件
export default {
  name: 'Object',
  data() {
    return {
      object: {},
    };
  },
  computed: {
    // 用计算属性处理路由参数，把字符串转成数字匹配JSON里的id
    currentId() {
      return parseInt(this.$route.params.id);
    }
  },
  methods: {
    getObjects() {
      this.$http.get('/static/data.json')
        .then((response) => {
          // 从objects数组中筛选出匹配id的条目
          this.object = response.body.objects.find(obj => obj.id === this.currentId);
        })
    }
  },
  mounted() {
    this.getObjects();
  }
};
</script>

这里要注意：$route.params.id是字符串类型，而你JSON里的id是数字，必须用parseInt转换后再匹配，否则会找不到对应条目。

3. 额外优化建议 #

• 给v-for循环加上:key属性（已在代码示例中添加），这是Vue的最佳实践，避免渲染时出现异常。
• 如果JSON数据不会动态更新，可以直接在组件中导入使用，不用每次发HTTP请求：

  import json from './../assets/data.json'
  // 在mounted中直接赋值：this.lists = json.objects;
  

  这样能减少请求开销，提升页面性能。

完成这些修改后，列表点击跳转和详情页展示功能就能正常工作了。

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