Vue：将 id 移交给其他组件答案

【问题标题】：Vue: Handover id to other componentVue：将 id 移交给其他组件
【发布时间】：2022-01-10 01:02:09
【问题描述】：

社区

在我的应用程序中，我呈现了一个医生列表。此列表显示在我的 DoctorView 组件中，如下所示：

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

我想要做的是，当用户单击此列表中的条目时，我希望应用程序打开有关该医生的详细信息页面。所以在我的 DoctorListItem 组件中，我使用了路由器链接：

<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 路由器不知道这些路由。知道如何停止这些警告：

【问题讨论】：

标签： javascript vue.js render vue-props

【解决方案1】：

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

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

【讨论】：