> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/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/datta/datta-able-vue/development/routing.md).

# Routing

Configure your navigation routing.

### Configure Route

Open `src\router\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.

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

```typescript
import { createRouter, createWebHistory } from 'vue-router'
import MainRoutes from './MainRoutes'
import PublicRoutes from './PublicRoutes'
import { useUIStore } from '@/stores/ui'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:pathMatch(.*)*',
      component: () => import('@/views/pages/maintenance/Error404Page.vue'),
    },
    PublicRoutes,
    MainRoutes,
  ],
  scrollBehavior() {
    return { top: 0 }
  },
})

// Navigation Guard to Change Title
router.beforeEach((to, from, next) => {
  const appTitle = import.meta.env.VITE_APP_TITLE
  document.title = to.meta.title ? `${to.meta.title} | ${appTitle}` : appTitle
  next()
})

router.beforeEach(() => {
  const uiStore = useUIStore()
  uiStore.isLoading = true
})

router.afterEach(() => {
  const uiStore = useUIStore()
  uiStore.isLoading = false
})

export default router

```

{% endcode %}