vbv/client/src/router/index.ts

import DashboardPage from "@/pages/DashboardPage.vue";
import LoginPage from "@/pages/LoginPage.vue";
import { redirectToLoginIfRequired, updateLoggedIn } from "@/router/guards";
import { useAppStore } from "@/stores/app";
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
  routes: [
    {
      path: "/login",
      component: LoginPage,
      meta: {
        // no login required -> so `public === true`
        public: true,
      },
    },
    {
      path: "/",
      name: "home",
      component: DashboardPage,
    },
    {
      path: "/media/:mediaLibraryPageSlug",
      props: true,
      component: () => import("@/pages/mediaLibrary/MLParentPage.vue"),
      children: [
        {
          path: "",
          component: () => import("@/pages/mediaLibrary/MLIndexPage.vue"),
        },
        {
          path: "category/:mediaCategorySlug/media",
          props: true,
          component: () => import("@/pages/mediaLibrary/MLMediaListPage.vue"),
        },
        {
          path: "category/:mediaCategorySlug",
          props: true,
          component: () => import("@/pages/mediaLibrary/MLCategoryDetailPage.vue"),
        },
        {
          path: "category",
          component: () => import("@/pages/mediaLibrary/MLCategoryIndexPage.vue"),
        },
      ],
    },
    {
      path: "/course/:courseSlug/competence",
      props: true,
      component: () => import("@/pages/competence/CompetenceParentPage.vue"),
      children: [
        {
          path: "",
          props: true,
          component: () => import("@/pages/competence/CompetenceIndexPage.vue"),
        },
        {
          path: "competences",
          props: true,
          component: () => import("@/pages/competence/CompetenceListPage.vue"),
        },
        {
          path: "criteria",
          component: () => import("@/pages/competence/PerformanceCriteriaPage.vue"),
        },
        {
          path: "criteria/:criteriaSlug",
          props: true,
          component: () =>
            import("@/pages/competence/SinglePerformanceCriteriaPage.vue"),
        },
      ],
    },
    {
      path: "/course/:courseSlug/learn",
      component: () => import("../pages/learningPath/LearningPathPage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/learn/:circleSlug",
      component: () => import("../pages/learningPath/CirclePage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/learn/:circleSlug/evaluate/:learningUnitSlug",
      component: () => import("../pages/learningPath/SelfEvaluationPage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/learn/:circleSlug/:contentSlug",
      component: () => import("../pages/learningPath/LearningContentPage.vue"),
      props: true,
    },
    {
      path: "/course/:courseSlug/cockpit",
      props: true,
      component: () => import("@/pages/cockpit/CockpitParentPage.vue"),
      children: [
        {
          path: "",
          component: () => import("@/pages/cockpit/CockpitIndexPage.vue"),
          props: true,
        },
        {
          path: "profile/:userId",
          component: () => import("@/pages/cockpit/CockpitUserProfilePage.vue"),
          props: true,
        },
        {
          path: "profile/:userId/:circleSlug",
          component: () => import("@/pages/cockpit/CockpitUserCirclePage.vue"),
          props: true,
        },
      ],
    },
    {
      path: "/shop",
      component: () => import("@/pages/ShopPage.vue"),
    },
    {
      path: "/messages",
      component: () => import("@/pages/MessagesPage.vue"),
    },
    {
      path: "/profile",
      component: () => import("@/pages/ProfilePage.vue"),
    },
    {
      path: "/notifications",
      component: () => import("@/pages/NotificationsPage.vue"),
    },
    {
      path: "/styleguide",
      component: () => import("../pages/StyleGuidePage.vue"),
      meta: {
        public: true,
      },
    },
    {
      path: "/:pathMatch(.*)*",
      component: () => import("../pages/404Page.vue"),
    },
  ],
});

router.beforeEach(updateLoggedIn);
router.beforeEach(redirectToLoginIfRequired);

router.afterEach((to, from) => {
  const appStore = useAppStore();
  appStore.routingFinished = true;
});

export default router;