Skip to main content

Routing

Overview​

Smart Academic Hub uses Vue Router for client-side routing with authentication guards and lazy loading.

Route Configuration​

Routes are defined in src/router/index.ts.

Route Structure​

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/DefaultLayout.vue'),
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('@/views/HomeView.vue'),
      },
    ],
  },
  {
    path: '/auth',
    component: () => import('@/layouts/AuthLayout.vue'),
    children: [
      {
        path: 'login',
        name: 'login',
        component: () => import('@/views/auth/LoginView.vue'),
      },
    ],
  },
];

Global Guards​

Authentication Guard

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

Route Meta Fields​

{
  path: '/dashboard',
  meta: {
    requiresAuth: true,
    roles: ['admin', 'staff'],
    title: 'Dashboard',
  },
}

Lazy Loading​

Routes are lazy-loaded for optimal performance:

component: () => import('@/views/DashboardView.vue')

Named Routes​

Use named routes for navigation:

router.push({ name: 'student-detail', params: { id: 123 } });

Route Parameters​

{
  path: '/students/:id',
  name: 'student-detail',
  component: () => import('@/views/students/StudentDetail.vue'),
}

Programmatic Navigation​

// Push to route
router.push('/dashboard');

// Replace current route
router.replace('/login');

// Go back
router.back();

Nested Routes​

{
  path: '/students',
  component: StudentLayout,
  children: [
    { path: '', name: 'student-list', component: StudentList },
    { path: ':id', name: 'student-detail', component: StudentDetail },
    { path: ':id/edit', name: 'student-edit', component: StudentEdit },
  ],
}