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

# 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.

```typescript
// routes\index.ts
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'vue-router/auto-routes';
import { useAuthStore } from '@/stores/auth';

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]
});

router.beforeEach(async (to) => {
  const auth = useAuthStore();

  const routeName = String(to.name ?? '');
  const authRequired = routeName.startsWith('/(main)') || to.matched.some((record) => record.meta.requiresAuth === true);

  if (authRequired && !auth.user) {
    auth.returnUrl = to.fullPath;
    return { path: '/login' };
  }

  if (auth.user && to.path === '/login') {
    return { path: auth.returnUrl || '/' };
  }
});
```