User profile page

src/router/index.js

@@ -24,6 +24,7 @@ import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressB
 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";
+import Profile from "../views/LandingPages/Profile/Profile.vue";
 
 
 const router = createRouter({
@@ -34,12 +35,19 @@ const router = createRouter({
       name: "presentation",
       component: PresentationView,
     },
+
     {
       path: '/project/:id',
       name: 'project',
       component: Project
     },
 
+    {
+      path: '/profile/:id',
+      name: 'profile',
+      component: Profile
+    },
+
     {
       path: "/pages/landing-pages/about-us",
       name: "about",

src/views/LandingPages/Profile/Profile.vue

@@ -0,0 +1,43 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+
+const profileId = ref(null);
+const route = useRoute();
+const profileData = ref([]);
+
+onMounted(async() => {
+    profileId.value = route.params.id;
+    await getProfile();
+});
+
+
+const getProfile = async () => {
+    const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${profileId.value}/`);
+    profileData.value = profileDataRecieved.data;
+
+};
+
+
+
+
+</script>
+
+
+<template>
+    <div>
+      <h1>Профиль пользователя номер: {{ profileData.id }}</h1>
+      <h2>{{ profileData.username }}</h2>
+        <p>{{ profileData.email }}</p>
+         
+      
+    </div>
+  </template> 
+
+
+
+<style scoped>
+</style>
+