Конфигурация маршрутизации VUE.js - PullRequest
Новая
       29

Конфигурация маршрутизации VUE.js

0 голосов
/ 15 ноября 2018

Я создаю приложение, в котором у меня есть список пользователей, и когда я нажимаю на одного пользователя, он переводит меня в этот профиль конкретного пользователя.Я использую ASP.NET Core API с Vue.js в качестве внешнего интерфейса.Мой API работает, поэтому, когда я нажимаю на пользователя, я могу видеть данные, поступающие из моей базы данных, используя Chrome dev Tools и Postman.Однако, как только моя страница перенаправляется в их профиль, эта страница становится пустой.Когда я смотрю на инструменты разработчика, я вижу, что он попадает в мой API и получает правильную информацию при просмотре вкладки предварительного просмотра.

Итак, мой вопрос: почему моя страница пуста и не предоставляет мне информацию этих пользователей.Может ли кто-нибудь помочь мне взглянуть на мою маршрутизацию? Думаю, в этом моя проблема?

Я передаю их lastName в качестве параметра, но в итоге я передам уникальный идентификатор

enter image description here

Вот моя страница Profile.vue, здесь я должен увидеть профиль пользователя 

<template>
  <div class="container">
    <v-card>
      <v-data-table :headers="headers"
                    :items="records"
                    :search="search">
        <template slot="items" slot-scope="records">
          <td class="text-xl-left">{{ records.item.firstName }}</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"></td>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

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

  export default {
    data() {
      return {
        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.GetInquiriesByUser()
    },
    methods: {
      async GetInquiriesByUser() {
        this.loading = true

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

Я использую router.push, чтобы направить меня к пользователюпрофиль с предыдущей страницы (список) 

editItem(lastName) {
        this.$http.get(`http://localhost:61601/api/GetInquiry/${lastName}`)
        this.$router.push({ path: `/Profile/${lastName}` }) 
      },

Вот мой файл rout.js - я действительно думаю, что моя ошибка в этом, но не могу понять это.

export const routes = [
  { name: 'home', path: '/', component: HomePage, display: 'Home', icon: 'home' },
  { name: 'AdminInquiry', path: '/Inquiry/AdminInquiry', component: AdminInquiry, display: 'Admin', icon: 'list' },
  { name: 'Profile', path: `/Profile/:lastName`, component: Profile }
]

1 Ответ

0 голосов
/ 16 ноября 2018

Я предполагаю, что это проблема с настройкой роутера, не соответствующей вашему бэкэнду. Пустая страница может свидетельствовать об этом.

для вашей страницы vue, режим Маршрутизатора по умолчанию - hash, в котором используется взлом URL-адреса, то есть изменение на что-либо после символа # (с некоторыми оговорками) не приводит к перенаправлению браузера. Поэтому, когда вы переходите от, скажем, localhost:80#/Inquiry/AdminInquiry к localhost:80#/Profile/Drumpf, изменение полностью обрабатывается приложением vue. Однако, если вы переходите от localhost:80/Inquiry/AdminInquiry к localhost:80/Profile/Drumpf, навигация будет более сложной. Js может обрабатывать переход путем искусственного изменения URL-адреса без фактического перенаправления, если событие инициируется с помощью js. Однако, если это происходит с использованием стандартного якоря, происходит переадресация вашего браузера, и ваше серверное приложение должно обработать, какой маршрут передается в приложение js.

Похоже, вы собираетесь реализовать режим history. Это требует определения режима как history в приложении vue и внесения соответствующих изменений в ASP, nginx или apache для обработки маршрутов. Более подробная информация здесь: https://router.vuejs.org/guide/essentials/history-mode.html

...