Работают ссылки /project/1 и /project/2

src/router/index.js

@@ -23,6 +23,9 @@ import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vu
 import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue";
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
+import Project from "../views/LandingPages/Project/Project.vue";
+
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -31,6 +34,12 @@ const router = createRouter({
       name: "presentation",
       component: PresentationView,
     },
+    {
+      path: '/project/:id',
+      name: 'project',
+      component: Project
+    },
+
     {
       path: "/pages/landing-pages/about-us",
       name: "about",

src/views/LandingPages/Project/Project.vue

@@ -0,0 +1,56 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+
+const projectId = ref(null);
+const route = useRoute();
+const projectData = ref([]);
+
+onMounted(async() => {
+    projectId.value = route.params.id;
+    await getProject();
+});
+
+
+const getProject = async () => {
+    try {
+        const projectDataRecieved = await axios.get(`http://somebodyhire.me/api/projects/${projectId.value}/`);
+        projectData.value = projectDataRecieved.data;
+    } catch (error) {
+        console.error('There was an error fetching the project data', error);
+    }
+};
+
+
+
+
+</script>
+
+
+<template>
+    <div v-if="projectData">
+      <h1>Проект номер: {{ projectData.id }}</h1>
+      <h2>{{ projectData.title }}</h2>
+      <p>{{ projectData.description }}</p>
+      <img :src="projectData.featured_image" alt="Featured image">
+      <p v-if="projectData.demo_link">Demo Link: <a :href="projectData.demo_link">{{ projectData.demo_link }}</a></p>
+      <p v-if="projectData.source_link">Source Link: <a :href="projectData.source_link">{{ projectData.source_link }}</a></p>
+      <p>Total Votes: {{ projectData.vote_total }}</p>
+      <p>Vote Ratio: {{ projectData.vote_ratio }}</p>
+      <p>Created On: {{ new Date(projectData.created).toLocaleDateString() }}</p>
+      <p>Owner ID: {{ projectData.owner }}</p>
+      <p>Tags: 
+        <span v-for="(tag, index) in projectData.tags" :key="index">
+          {{ tag }}<span v-if="index < projectData.tags.length - 1">, </span>
+        </span>
+      </p>
+    </div>
+  </template> 
+
+
+
+<style scoped>
+</style>
+