import { createRouter, createWebHistory } from 'vue-router' import CockpitView from '@/views/CockpitView.vue' import LoginView from '@/views/LoginView.vue' import MediaMainView from '@/views/MediaMainView.vue' import { redirectToLoginIfRequired, updateLoggedIn } from '@/router/guards' import { useAppStore } from '@/stores/app' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/login', component: LoginView, meta: { // no login required -> so `public === true` public: true, }, }, { path: '/', name: 'home', component: CockpitView, }, { path: '/shop', component: () => import('@/views/ShopView.vue'), }, { path: '/mediacenter', component: () => import('@/views/MediaView.vue'), children: [ { path: 'overview', component: () => import('@/views/MediaMainView.vue') } ] }, { path: '/messages', component: () => import('@/views/MessagesView.vue'), }, { path: '/profile', component: () => import('@/views/ProfileView.vue'), }, { path: '/learn/:learningPathSlug', component: () => import('../views/LearningPathView.vue'), props: true, }, { path: '/learn/:learningPathSlug/:circleSlug', component: () => import('../views/CircleView.vue'), props: true, }, { path: '/learn/:learningPathSlug/:circleSlug/evaluate/:learningUnitSlug', component: () => import('../views/LearningUnitSelfEvaluationView.vue'), props: true, }, { path: '/learn/:learningPathSlug/:circleSlug/:contentSlug', component: () => import('../views/LearningContentView.vue'), props: true, }, { path: '/styleguide', component: () => import('../views/StyleGuideView.vue'), meta: { public: true, }, }, { path: '/:pathMatch(.*)*', component: () => import('../views/404View.vue'), }, ], }) router.beforeEach(updateLoggedIn) router.beforeEach(redirectToLoginIfRequired) router.afterEach((to, from) => { const appStore = useAppStore(); appStore.routingFinished = true; }); export default router