parameter in vue js routes
index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Detail from '../views/Details.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/detail/:customerid',
name: 'detail',
component: Detail
}
]
})
export default router
-----------------------------------------------------------------------------------------------------------------------
HomeView.vue
<script>
import { RouterLink } from 'vue-router';
export default{
name:'HomeView',
data(){
return{
customer:[]
}
},
async mounted(){
fetch("http://localhost:8000/api/user_info",{
method:"GET",
headers:{
"Accept":"application/json"
}
})
.then(response => response.json())
.then(data => {
console.log(data.data);
this.customer = data.data;
})
}
}
</script>
<template>
<br>
<br>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<!-- table -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr v-for="key in customer">
<th scope="row">{{ key.id }}</th>
<td>{{ key.name }}</td>
<td><RouterLink :to="{name:'detail',params:{customerid:key.id}}">full details</RouterLink></td>
</tr>
</tbody>
</table>
</div>
<div class="col-2"></div>
</div>
<br>
<br>
</template>
--------------------------------------------------------------------------------------------------------------------
Details.vue
<script>
export default{
name:'Details',
data(){
return{
userdata:[]
}
},
mounted(){
var id = this.$route.params.customerid;
let item = {id}
fetch("http://localhost:8000/api/user_detail",{
method:"POST",
headers:{
"Content-Type":"application/json",
"Accept":"application/json"
},
body: JSON.stringify(item)
})
.then(response => response.json())
.then(data => {
console.warn(data.user);
this.userdata = data.user;
})
}
}
</script>
<template>
<br>
<RouterLink to="/">home page</RouterLink>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">USER ID</th>
<th scope="col">NAME</th>
<th scope="col">EMAIL</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ userdata.id }}</td>
<td>{{ userdata.name }}</td>
<td>{{ userdata.email }}</td>
</tr>
</tbody>
</table>
</template>
