VUE.js 路由配置答案

【问题标题】：VUE.js Routing ConfigurationVUE.js 路由配置
【发布时间】：2023-03-06 15:56:01
【问题描述】：

我正在创建一个应用程序，其中有一个用户列表，当我单击一个用户时，它会将我带到该特定用户的个人资料。我使用 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 }
]

【问题讨论】：

你用的是什么路由器模式？
您不需要在editItem 中等待您的http 调用吗？
我正在使用 Vue.use(VueRouter)。当您的意思是路由器模式时，这就是您所指的吗？ @丹尼尔
@DilbarC 他的意思是历史或哈希模式。
路由器有两种使用方式，默认为hash模式，使用#字符后的路由，另一种模式为history，需要服务器交互。我猜你正在使用哈希模式。 router.vuejs.org/guide/essentials/history-mode.html

标签： vue.js routing vue-component vue-router

【解决方案1】：

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

对于您的 vue 页面，默认路由器模式是 hash，它使用 url hack，即更改为 # 字符之后的任何内容（有一些警告）不会导致浏览器重定向。因此，当您从 localhost: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

【讨论】：