Defining Routes ​

Route File Convention ​

Spire's Route files have the following convention:

• Each "Domain" or "Section" gets its own route file (e.g. `@/routes/customer.routes.ts) and will be imported in the main route file
• Anything that is based upon the root path / can be in the main route file @/routes/routes.ts

Why? ​

• Route files can get insanely big and hard to search for and reason about
• You could disable a whole Domain/Section of your App by removing a single import, which might come in handy.
• Less Git conflicts

Define Routes ​

You can define Routes by using the Toolkit provided route() helper method.

import { useRoutes } from "@/framework/composables/useRoutes"

const { route } = useRoutes()
route({
    name: "freeflow-landing",
    path: "/freeflow",
    component: async () => import("@/ui/pages/Flow/FlowLandingPage.vue"),
    meta: {
        hideNavigationBar: true,
    },
})

route({
    name: "freeflow-payment-method",
    path: "/freeflow/:bookingId/payment-method",
    component: async () => import("@/ui/pages/Flow/BookingPaymentMethodPage.vue"),
})

route({
    name: "freeflow-booking",
    path: "/freeflow/:bookingId",
    component: async () => import("@/ui/pages/Flow/FlowBookingPage.vue"),
})

The object that gets passed to the Route helper is a normal VueRouter object with some additional options, such as layout.