Don't route to main profile for child pages

client/src/pages/userProfile/UserProfilePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useTranslation } from "i18next-vue";
 import { useFetch } from "@vueuse/core";
@@ -12,18 +12,24 @@ const props = defineProps<{
 
 const { t } = useTranslation();
 
-const pages = ref([
+const pages = [
   {
     label: t("general.learningPath"),
     route: "profileLearningPath",
     routeMatch: "profileLearningPath",
+    childrenRouteMatches: [],
   },
   {
     label: t("a.KompetenzNavi"),
     route: "competenceMain",
     routeMatch: "profileCompetence",
+    childrenRouteMatches: [
+      "competenceCertificates",
+      "competenceCertificateDetail",
+      "competenceEvaluations",
+    ],
   },
-]);
+];
 
 const courseSession = useCurrentCourseSession();
 const { data: user } = useFetch(
@@ -35,9 +41,16 @@ const router = useRouter();
 
 onMounted(() => {
   // if current route name not in pages, redirect to first page
-  if (route.name && !pages.value.find((page) => page.route === route.name)) {
+  if (
+    route.name &&
+    !pages.find((page) => {
+      const routeName = route.name?.toString() || "";
+      const routeMatch = [...page.childrenRouteMatches, page.routeMatch];
+      return routeMatch.some((match) => routeName.includes(match));
+    })
+  ) {
     router.push({
-      name: pages.value[0].route,
+      name: pages[0].route,
       params: { userId: props.userId, courseSlug: props.courseSlug },
     });
   }