我在Vue 3中有一个小应用程序，我列出本地json文件中的数据，然后单击到详细页面以查看其余数据。我能够列出所有数据并链接到详细页面，但我似乎想不出如何仅显示单个ID的数据。
router/index.js

...
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Ndas',
      component: Ndas
    },
    {
      path: '/nda/:id',
      name: 'NdaDetails',
      component: NdaDetails,
      props: true
    }
  ]
})
...

views/Ndas.vue--这行得通

<template>
  <main>
    <h1>NDAS</h1>
    <div v-if="loading">Loading...</div>
    <div v-for="nda in ndas" :key="nda.id">

      <router-link :to="{ name: 'NdaDetails', params: { id: nda.id }}">
        <h2>{{ nda.user_signature }}</h2>
      </router-link>

    </div>
  </main>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      loading: true,
      ndas: []
    }
  },

  mounted () {
    this.loading = true;
    axios
        .get('../../data/data.json')
        .then(response => (this.ndas = response.data))
        .catch(error => console.log(error))
        .finally(() => this.loading = false)

  },
}
</script>

views/NdaDetails.vue--这不起作用

<template>
  <div>
    <div v-if="nda">
      <h1>NDA's Detail Page</h1>
      <p>The job title is {{ nda.user_signature }}</p>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  props: ['id'],
  data() {
    return {
      nda: {}
    }
  },

  async created() {
    try {
      const res = await axios.get('../../data/data.json/'+this.id);
      this.nda = res.data;
    } catch (error) {
      console.log(error);
    }
  },
}
</script>