Question

我正在一个有一个用户列表的项目中，当我单击一个用户时，它应该直接指向他们的用户个人资料。我正在使用ASP.NET Core API，该API正在通过Postman测试并正在从SQL数据库中检索数据。

当我打开开发人员使用的Chrome时，我可以看到，当单击User时，页面将重定向到Profile.vue并点击我的API并仅检索该用户的信息，这很好。但是，我的页面是空白的。我很确定我的路由配置不正确。出于测试目的，我只是尝试检索firstName

这是我的用户列表页面。

<v-data-table :headers="headers"
                :items="records"
                :search="search">
    <template slot="items" slot-scope="records">
      <td class="text-xl-left">{{ records.item.fullName }}</td>
      <td class="text-xs-left">{{ records.item.email }}</td>
      <td class="text-xs-left">{{ records.item.phone }}</td>
      <td class="text-xs-left">{{ records.item.city }}</td>
      <td class="justify-center layout px-0">
        <v-icon small
                class="mr-4"
                @click="editItem(records.item.lastName)">
                edit
        </v-icon>
      </td>
    </template>
    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ search }}" found no results.
    </v-alert>
  </v-data-table>
</v-card>

<script>
import api from '../../store/api.js'

 export default {
data() {
  return {
    search: '',
    records: {},
    headers: [
      { text: 'Full Name', value: 'fullName' },
      { text: 'Email', value: 'email' },
      { text: 'Phone', value: 'phone' },
      { text: 'City', value: 'city' },
      { text: 'Actions', value: 'name', sortable: false }
    ]
  }
},
async created() {
  this.GetAllInquiries()
},
methods: {
  editItem(lastName) {
    this.$http.get(`http://localhost:61601/api/GetInquiry/${lastName}`)
    this.$router.push({ path: `./Profile/${lastName}` }) 
  },
  async GetAllInquiries() {
    this.loading = true

    try {
      this.records = await api.GetAllInquiries()
    } finally {
      this.loading = false
    }
  },

单击用户时，我有一个router.push，可将我带到该特定用户的Profile.vue页面：

<template>
 <div>
   Student First Name: {{ records.item.FirstName }}<br/>
 </div>

 <script>
   import api from '../../store/api.js'

 export default {
data() {
  return {
    records: {
      firstName : this.firstName 
    },
  }
},
async created() {
  this.GetInquiriesByUser()
},
methods: {
  async GetInquiriesByUser() {
    this.loading = true

    try {
      this.records = await api.GetInquiriesByUser()
    } finally {
      this.loading = false
    }
  },

这是我的route.js（这是我认为发生错误的地方）

{
path: './Profile/',
name: 'Profile',
component: Profile
}

这是chrome开发工具的屏幕截图。这是在我单击列表中的用户之后，重定向到http://localhost:61601/Inquiry/Profile/Duck，就像之前提到的，当我单击“预览”选项卡时，我可以看到“鸭子”的所有数据

我希望这一切都说得通，我尝试提供尽可能多的细节，我认为这是我想得太多，太复杂了。任何帮助将不胜感激。

Vue.js用户配置文件路由问题

0 个答案: