Odtnhj

I am creating an application where I have a list of users, when I click on a single user, it takes me to that specific users profile. I am using ASP.NET Core API with Vue.js as my front end. My API is working so when I click on the user, I am able to see the data coming from my database using Chrome dev Tools and Postman. However, once my page redirects to their profile, that page is blank. When I look in dev tools, I can see that its hitting my API and getting the correct information when looking at the preview tab.

So my question is, why is my page blank and not providing me with that users information. Can someone help me look at my routing, I think that is where my issue is?

I am passing their lastName as the param, but eventually I will pass a unique id

Here is my Profile.vue page, this is where I should see the users profile

<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>

I am using router.push to route me to the user profile from the previous page (the list)

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

Here is my routes.js file - I really think my error is in this, but cant seem to figure it out.

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 
]

I'm guessing that this is an issue with the router setup not matching your backend. The blank page can be indicative of this.

for your vue page, the default Router mode is hash which uses a url hack, which is that changes to anything after # character (with some caveats) do not cause the browser to redirect. So when you're going from let's say localhost:80#/Inquiry/AdminInquiry to localhost:80#/Profile/Drumpf, the change is handled entirely by the vue application. If however if you navigate from localhost:80/Inquiry/AdminInquiry to localhost:80/Profile/Drumpf the navigation is more complex. The js can handle the transition by artificially changing the url without an actual redirect taking place, if the event is triggered using js. If, however, that happens using a standard anchor, your browser redirect gets triggered, and it's up to your server-side application to handle what route is passed to the js app.

It looks like you're looking to implement history mode. This requires defining the mode as history in the vue app, and making the appropriate changes for your ASP, nginx, or apache to handle the routes. More info here: https://router.vuejs.org/guide/essentials/history-mode.html