> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/mantis-vuetify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/mantis-vuetify/development/routing.md).

# Routing

Page and URL routing

The Mantis routing system is based on [vue-router](https://router.vuejs.org/) and its package [vue-router](https://router.vuejs.org/), it also uses code splitting for better performance. This uses Vue Router with auto-generated routes for a cleaner and more scalable routing setup.

### Configure Route

Open `...\src\routes\index.ts` You will find the below example code. In the below code, we have shown three different routes. The `(main)` route group is used for all authenticated pages in pages folder.

{% code title="routes\index.ts" %}

```typescript
import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { useUIStore } from '@/stores/ui';

import { routes } from 'vue-router/auto-routes';

// Manually register the landing page as a standalone route outside the (main) FullLayout group.
// any index.vue at the root level would become a child rendered inside FullLayout.
const landingRoute = {
  path: '/',
  name: 'landing',
  component: () => import('@/pages/index.vue'),
  meta: { requiresAuth: false }
};

// 404 Not Found route - catches all undefined paths
const notFoundRoute = {
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('@/pages/maintenance/error404.vue'),
  meta: { requiresAuth: false }
};

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [landingRoute, ...routes, notFoundRoute],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});

```

{% endcode %}

{% hint style="info" %}
**How can I add a new page with a menu item?**\
You can use the explanation below to add/remove menu routes and their menu items.
{% endhint %}

### Add a New menu/route in the main layout

To add one more menu item in **(main)**, Add new page in `src/pages/(main)` folder & the same menu needed to be added in the respective JSON as well, here: `src/layouts/dashboard/vertical-sidebar/sidebarItem.ts`

{% code title="sidebarItem.ts" %}

```json5
{
    id: 'newmenu',
    title: 'New page',
    icon: BuildOutlined,
    to: '/newmenu'
},
....
...
```

{% endcode %}

{% hint style="warning" %}
Any route added in **(main)** will automatically go through **\<AuthGuard>** & auto generated routes in **typed-router.d.ts** file&#x20;
{% endhint %}