如何使用 vue js 传递和检索 id？

Question

我正在尝试将一个 id 从 1 个 vue 传递到另一个 vue 并为我的 api 服务获取数据。

我能够从第一个 vue (ClientListing.vue) 传递 id，但不知何故我的第二个 vue (Client.vue) 没有检索到 id。

我的 ClientListing.vue

    <th scope="row" v-on:click="rowClicked(row)" style="cursor: pointer"> 
       <div class="media align-items-center" @click="showClient(row)">
          <a class="avatar rounded-circle mr-3">
              <img alt="Image placeholder" :src="row.customerTypeIcon">
          </a>
          <div class="media-body">
              <span class="name mb-0 text-sm">{{row.name}}</span>
          </div>
       </div>
    </th>

methods: {
   showClient(item) {
   router.push({ path: 'Clients/client', query: { id: item.id } });
   }
}

我的客户.vue

mounted: function () {
   CifRepository
   .getCustomerDetails(this.$route.query)
   .then(response => {
      this.model = response.data.Results;
   }
)
.catch(error => {
   console.log(error)
   this.errored = true
})
.finally(() => this.loading = false);
}

getCustomerDetails(id) {
   return Repository.get("/api/Accounts/GetCustomerDetails");
}

我的 api 服务 - AccountsController

[HttpGet("GetCustomerDetails")]
public async Task<CustomerListingDto> GetCustomerDetails(long id)
{

   CustomerServiceModel customers = await
   _accountService.GetCustomerDetailsByCustomerId(id);

   return _mapper.Map<CustomerListingDto>(customers);
}

我的 AccountController/GetCustomerDetails 不断获取 0/null 值，无法从 ClientListing.vue 获取 id 传递

Answer 1

应该是this.$route.query.id 而不是this.$route.query

mounted: function () {
  CifRepository
  .getCustomerDetails(this.$route.query.id)
  .then(response => {
    this.model = response.data.Results;
  })
  .catch(error => {
    console.log(error)
    this.errored = true
  })
  .finally(() => this.loading = false);
}

和

getCustomerDetails(id) {
   return Repository.get("/api/Accounts/GetCustomerDetails/" + id);
}

我不确定 C# 部分，但可能是

[HttpGet("GetCustomerDetails/${id}")]
public async Task<CustomerListingDto> GetCustomerDetails(long id)
{

   CustomerServiceModel customers = await
   _accountService.GetCustomerDetailsByCustomerId(id);

   return _mapper.Map<CustomerListingDto>(customers);
}