时间戳

首页 > 解决方案 > VUE.js 路由配置

vue.js - VUE.js 路由配置

问题描述

我正在创建一个应用程序，其中有一个用户列表，当我单击一个用户时，它会将我带到该特定用户的个人资料。我使用 ASP.NET Core API 和 Vue.js 作为我的前端。我的 API 正在工作，所以当我点击用户时，我可以使用 Chrome 开发工具和 Postman 查看来自我的数据库的数据。但是，一旦我的页面重定向到他们的个人资料，该页面就是空白的。当我查看开发工具时，我可以看到它在查看我的 API 并在查看预览选项卡时获得了正确的信息。

所以我的问题是，为什么我的页面是空白的，并且没有向我提供该用户信息。有人可以帮我看看我的路由吗，我认为这是我的问题所在？

我将他们的姓氏作为参数传递，但最终我将传递一个唯一的 id

在此处输入图像描述

这是我的 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}` }) 
      },

这是我的 routes.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 }
]

标签： vue.jsroutingvue-componentvue-router

解决方案

我猜这是路由器设置与您的后端不匹配的问题。空白页可以表明这一点。

对于您的 vue 页面，默认路由器模式是hash使用 url hack，即更改#字符后的任何内容（有一些警告）不会导致浏览器重定向。因此，当您从 let's saylocalhost:80#/Inquiry/AdminInquiry变为localhost:80#/Profile/Drumpf时，更改完全由 vue 应用程序处理。但是，如果您从导航localhost:80/Inquiry/AdminInquiry到localhost:80/Profile/Drumpf导航更复杂。如果事件是使用 js 触发的，则js可以通过人为更改 url 来处理转换，而不会发生实际的重定向。但是，如果使用标准锚点发生这种情况，则会触发您的浏览器重定向，并且由您的服务器端应用程序来处理传递给 js 应用程序的路由。

看起来您正在寻找实现history模式。这需要在 vue 应用程序中定义模式history，并为您的 ASP、nginx 或 apache 进行适当的更改以处理路由。更多信息：https ://router.vuejs.org/guide/essentials/history-mode.html

推荐阅读