my groups view

src/components/UserProfileComponents/LargeProfileCard.vue

@@ -37,7 +37,7 @@
           </li>
           <li>
             <router-link
-              to=""
+              :to="'/user/' + id + '/groups'"
               class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Mine grupper
             </router-link>
@@ -51,9 +51,10 @@
           </li>
           <li>
             <div
-                @click="logout"
-                class="cursor-pointer block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-            >Logg ut
+              @click="logout"
+              class="cursor-pointer block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Logg ut
             </div>
           </li>
           <li>
@@ -143,10 +144,10 @@ export default {
       }
       return "../assets/defaultUserProfileImage.jpg";
     },
-    logout(){
-      this.$store.commit('logout');
-      this.$router.push('/')
-    }
+    logout() {
+      this.$store.commit("logout");
+      this.$router.push("/");
+    },
   },
   beforeMount() {
     this.getUser();

src/router/index.js

@@ -89,7 +89,13 @@ const routes = [
     name: "notifications",
     component: () => import("../views/NotificationView.vue"),
     beforeEnter: guardRoute,
-  }
+  },
+  {
+    path: "/user/:id/groups",
+    name: "myGroups",
+    component: () => import("../views/MyGroupsView.vue"),
+    beforeEnter: guardRoute,
+  },
 ];
 
 const router = createRouter({

src/views/MyGroupsView.vue

+<template>
+  <div>
+    <div id="myGroups">
+      <div>Mine grupper:</div>
+      <group-list :groupList="myGroups" />
+    </div>
+  </div>
+</template>
+
+<script>
+import GroupList from "@/components/GroupeComponents/GroupList.vue";
+import { getMyGroups } from "@/utils/apiutil";
+
+export default {
+  data() {
+    return {
+      myGroups: [],
+    };
+  },
+  components: {
+    GroupList,
+  },
+  methods: {
+    async getMyGroups() {
+      this.myGroups = await getMyGroups();
+    },
+  },
+  beforeMount() {
+    this.getMyGroups();
+  },
+};
+</script>