add single agent view

src/components/Agent.vue

 <template>
     <CContainer>
         <div>
-            <h2>Agent Lists</h2>
+            <h2>{{ agentId }}</h2>
             <CContainer>
             <CTable hover>
                 <CTableHead>
@@ -42,8 +42,8 @@
       methods: {
         async fetchAgentsData() {
           try {
-            console.log("`http://192.168.88.238:8080/api/v1/agent/${this.agentID}`");
-            const response = await fetch("`http://192.168.88.238:8080/api/v1/agent/${this.agentID}`");
+            console.log("`http://192.168.88.238:8080/api/v1/agent/${this.agentId}`");
+            const response = await fetch("`http://192.168.88.238:8080/api/v1/agent/${this.agentId}`");
             if (!response.ok) throw new Error('Failed to fetch');
             this.agent_data = await response.json();
             console.log(this.agent_data);
@@ -55,7 +55,7 @@
       watch: {
         '$route'(to, from) {
         // React to route changes and update the productId
-        this.agentID = to.params.agentID;
+        this.agentId = to.params.agentId;
         }
       }
     }

src/components/Agents.vue

@@ -15,7 +15,7 @@
             <CTableBody>
             <CTableRow v-for="(agent, index) in agents" :key="agent.id">
                 <CTableDataCell>
-                  <router-link :to="`/agent/${agent.id}`" >
+                  <router-link :to="`/agents/${agent.id}`" >
                     {{ agent.id }}
                   </router-link>
                 </CTableDataCell>

src/main.js

@@ -14,8 +14,16 @@ const router = createRouter({
     history: createWebHistory(),
     routes: [
       { path: '/', component: Criteria },
-      { path: '/agents', component: Agents },
-      { path: '/agent/:agentID', component: Agent }
+      { path: '/agents', component: Agents,
+        children: [
+        {
+            path: ':agentId',
+            name: 'agentId',
+            props: true,
+            component: Agent
+        }
+      ]
+      },
     ]
   });
 export default router;