---
description: Configure your navigation routing.
---

# Routing

### Configure Route

Open `...\src\routes\index.ts` You will find the below example code. In the below code, we have shown four different routes. **MainRoutes** is the main layout routing you see after login.

<pre class="language-typescript" data-title="routes\index.ts"><code class="lang-typescript"><strong>import { createRouter, createWebHistory } from 'vue-router';
</strong>import MainRoutes from './MainRoutes';
import PublicRoutes from './PublicRoutes';
import { useAuthStore } from '@/stores/auth';

export const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/:pathMatch(.*)*',
            component: () => import('@/views/pages/maintenance/error/Error404.vue')
        },
        MainRoutes,
        PublicRoutes
    ]
});

router.beforeEach(async (to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/'];
  const auth: AuthStore = useAuthStore();

  const isPublicPage = publicPages.includes(to.path);
  const authRequired = !isPublicPage &#x26;&#x26; to.matched.some((record) => record.meta.requiresAuth);

  // User not logged in and trying to access a restricted page
  if (authRequired &#x26;&#x26; !auth.user) {
    auth.returnUrl = to.fullPath; // Save the intended page
    next('/login');
  } else if (auth.user &#x26;&#x26; to.path === '/login') {
    // User logged in and trying to access the login page
    next({
      query: {
        ...to.query,
        redirect: auth.returnUrl !== '/' ? to.fullPath : undefined
      }
    });
  } else {
    // All other scenarios, either public page or authorized access
    next();
  }
});
</code></pre>
