Vue：将id移交给其他组件

Question

社区

在我的应用程序中，我提供了一份医生名单。此列表在我的 DoctorView 组件中显示如下：

 <div    
  class="col-12 m-2"
  v-for="recommendation in recommendations"
  :key="recommendation"
  >
   <DoctorListItem :recommendation="recommendation" />
 </div>

我想做的是，当用户单击此列表中的条目时，我希望应用程序打开有关该医生的详细信息页面。所以在我的 DoctorListItem 组件中我使用了一个 router-link:

<router-link
      :to="`/doctors/${recommendation.doctor.doctor_id}`"
      class="stretched-link"
    ></router-link>

现在我需要将这个 id 提供给 ReadDoctorView，它会显示有关所选医生的详细信息。因为我需要这些信息来加载所选医生的详细信息。这个 id 在我的 DoctorView 和我的 DoctorListItem 中可用，但我无法将它获取到我的 ReadDoctorView 组件。我用道具试过这个，但我是一个绝对的初学者，我不确定在哪里定义道具以及如何处理数据。

在我的 ReadDoctorView 中，我需要一种类似于下面的方法来获取选定的医生：

methods: {
     getDoctorById() {
       this.id = this.recommendation.doctor.doctor_id;
       console.log(this.id);
       return axios
         .get('http://URL/doctors/${this.id}')
         .then((response) => {
           this.doctordetails = response.data;
           console.log(id);
         })
         .catch((error) => {
          console.log("Ein Fehler ist aufgetreten: " + error.response);
         });
     },
  },

我希望我的解释是有道理的，并且你能理解我想要完成的事情。预先感谢您的任何提示！

PS: 我收到这些警告是因为 vue 路由器不知道这些路由。知道如何停止这些警告：

Answer 1

在 Vue 路由器中，可以通过访问 $router 对象访问路由中的参数，尝试使用解决方案访问我希望它会起作用：

this.id = this.$route.params.id

Vue：将id移交给其他组件

Vue: Handover id to other component

javascript

vue.js

render

vue-props