Ich arbeite an einem Projekt mit VueJS und benötige Folgendes:

Verwenden Sie die API und rufen Sie die Benutzerliste auf der Startseite ab.

Wenn auf die Schaltfläche eines Benutzers geklickt wird, muss ich zu einer anderen Komponente umleiten und die Details dieses Benutzers (nur die Details des Benutzers, auf den ich geklickt habe) in dieser Komponente ausgeben.

Dies ist eine Tabelle mit Benutzerinformationen

 <v-data-table hide-actions flat :headers="headers" :items="doctors">
        <template v-slot:items="props">
          <td>{{ props.index + 1 }}</td>
          <td>{{ props.item.profile.full_name }}</td>
          <td>{{ props.item.email }}</td>
          <td>{{ props.item.username }}</td>
          <td>{{ props.item.updated_at }}</td>
         <td> 
          <v-btn outline small color="indigo" @click="view(props.item)">
                                <i class="fa fa-eye"></i> &nbsp; make payment
                            </v-btn>
         </td>


        </template>
        <template v-slot:no-results>
          <h6 class="grey--text">No data available</h6>
        </template>
      </v-data-table>

Funktion in Methode anzeigen

 view() {
            window.open(`/finance/pay-doctors/${item.id}`, "_blank");
        },

Ich habe eine dynamische Route erstellt

 { path: '/finance/pay-doctors/:id', component: DoctorDetails}

DoctorDetails können nicht erstellt und Daten angezeigt werden