Routing

VueRouter index file structure

As a routing system for Vue Balance uses VueRouter, whose definition is written in index.ts inside the router folder.

In this file we can define the hierarchical structure of the routes and specify the components to use when we visit each route, together with any eventual route params.

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('../views/layouts/AppLayout.vue'),
            redirect: 'timesheets',
            children: [
                {
                    path: 'timesheets',
                    name: TimesheetsRoutesNamesEnum.INDEX,
                    component: () => import('../cruds/timesheets/Index.vue'),
                },
                {
                    path: 'profile',
                    name: RouterNamesEnum.PROFILE,
                    component: () => import('../views/profile/Profile.vue'),
                },
                {
                    path: 'edit-profile',
                    name: RouterNamesEnum.EDIT_PROFILE,
                    component: () => import('../views/profile/EditProfile.vue'),
                },
                {
                    path: 'user-management',
                    name: RouterNamesEnum.USER_MANAGEMENT,
                    redirect: { name: 'users.index' },
                    children: [
                        {
                            path: 'users',
                            name: UserRoutesNamesEnum.INDEX,
                            component: () => import('../cruds/users/Index.vue'),
                        },
                        {
                            path: 'users/create',
                            name: UserRoutesNamesEnum.CREATE,
                            component: () =>
                                import('../cruds/users/Create.vue'),
                        },
                        {
                            path: 'users/:userId',
                            name: UserRoutesNamesEnum.SHOW,
                            component: () => import('../cruds/users/Show.vue'),
                        },
                        {
                            path: 'users/:userId/edit',
                            name: UserRoutesNamesEnum.EDIT,
                            component: () => import('../cruds/users/Edit.vue'),
                        },
                    ],
                },
                {
                    path: 'projects',
                    name: ProjectRoutesNamesEnum.INDEX,
                    component: () => import('../cruds/projects/Index.vue'),
                },
                {
                    path: 'projects/create',
                    name: ProjectRoutesNamesEnum.CREATE,
                    component: () => import('../cruds/projects/Create.vue'),
                },
                {
                    path: 'projects',
                    redirect: ProjectRoutesNamesEnum.INDEX,
                    children: [
                        {
                            path: ':projectId',
                            name: ProjectRoutesNamesEnum.SHOW,
                            component: () =>
                                import('../cruds/projects/Show.vue'),
                        },
                        {
                            path: ':projectId/spendings/create',
                            name: ProjectRoutesNamesEnum.SPEDINGS_CREATE,
                            component: () =>
                                import('../cruds/spendings/Create.vue'),
                        },
                        {
                            path: ':projectId/spendings/:spendingId',
                            name: ProjectRoutesNamesEnum.SPEDINGS_SHOW,
                            component: () =>
                                import('../cruds/spendings/Show.vue'),
                        },
                        {
                            path: ':projectId/spendings/:spendingId/edit',
                            name: ProjectRoutesNamesEnum.SPEDINGS_EDIT,
                            component: () =>
                                import('../cruds/spendings/Edit.vue'),
                        },
                    ],
                },
                {
                    path: 'projects/:projectId/edit',
                    name: ProjectRoutesNamesEnum.EDIT,
                    component: () => import('../cruds/projects/Edit.vue'),
                },
                {
                    path: 'orders',
                    name: OrdersRoutesNamesEnum.INDEX,
                    component: () => import('../cruds/orders/Index.vue'),
                },
                {
                    path: 'orders/reports',
                    name: OrdersRoutesNamesEnum.REPORTS,
                    component: () => import('../cruds/orders/Reports.vue'),
                },
                {
                    path: 'orders/create',
                    name: OrdersRoutesNamesEnum.CREATE,
                    component: () => import('../cruds/orders/Create.vue'),
                },
                {
                    path: 'orders',
                    redirect: { name: OrdersRoutesNamesEnum.SHOW },
                    children: [
                        {
                            path: ':orderId',
                            name: OrdersRoutesNamesEnum.SHOW,
                            component: () => import('../cruds/orders/Show.vue'),
                        },
                        {
                            path: ':orderId/spendings/create',
                            name: OrdersRoutesNamesEnum.SPEDINGS_CREATE,
                            component: () =>
                                import('../cruds/spendings/Create.vue'),
                        },
                        {
                            path: ':orderId/spendings/:spendingId',
                            name: OrdersRoutesNamesEnum.SPEDINGS_SHOW,
                            component: () =>
                                import('../cruds/spendings/Show.vue'),
                        },
                        {
                            path: ':orderId/spendings/:spendingId/edit',
                            name: OrdersRoutesNamesEnum.SPEDINGS_EDIT,
                            component: () =>
                                import('../cruds/spendings/Edit.vue'),
                        },
                    ],
                },
            ],
        },
    ],
})

export default router

For convenience, this file specifies route names through enums contained in the RouterNamesEnum.ts file.

export enum RouterNamesEnum {
    DASHBOARD = 'dashboard',
    PROFILE = 'profile',
    EDIT_PROFILE = 'edit-profile',
    USER_MANAGEMENT = 'user-management',
}

export enum UserRoutesNamesEnum {
    INDEX = 'users.index',
    CREATE = 'users.create',
    EDIT = 'users.edit',
    SHOW = 'users.show',
}

export enum TeamsRoutesNamesEnum {
    INDEX = 'teams.index',
    CREATE = 'teams.create',
    EDIT = 'teams.edit',
    SHOW = 'teams.show',
}

export enum ChannelsRoutesNamesEnum {
    INDEX = 'channels.index',
    CREATE = 'channels.create',
    EDIT = 'channels.edit',
    SHOW = 'channels.show',
}

export enum CompaniesRoutesNamesEnum {
    INDEX = 'companies.index',
    CREATE = 'companies.create',
    EDIT = 'companies.edit',
    SHOW = 'companies.show',
}

export enum ProjectRoutesNamesEnum {
    INDEX = 'projects.index',
    CREATE = 'projects.create',
    EDIT = 'projects.edit',
    SHOW = 'projects.show',
    SPEDINGS_CREATE = 'projects.spendings.create',
    SPEDINGS_SHOW = 'projects.spendings.show',
    SPEDINGS_EDIT = 'projects.spendings.edit',
}