Route Helpers ​

goTo ​

goTo() is your universal programmatic navigation tool. It also supports per-route based transitions and route-events.

Definition ​

goTo(
    route: number | RouteLocationRaw,
    transition: AnyTransition = "Page",
    events?: AnyRouteEvents,
    replace?: boolean
)

Usage ​

await goTo({ name: "my-route" }, "Next", ["open-edit-modal"])

This will go to the route with the name my-route using the transition Next and also add a route-event called open-edit-modal.

getCurrentRoute ​

Simple helper that returns the currently active route reactively.

const route = getCurrentRoute()

// route is a Ref containing the current route

Route Events ​

A Route-Event is a query-string-and-replace based eventing system that you can listen for.

Let's say you wanted to show a specific Toast message when hitting an url, like after a successful payment redirect. And then also redirect the user to another route, no matter where that route-event hit.

You can add ?event=payment-successful to the url. If payment-successful is a valid route-event, it's listeners will be called and the event will be removed from the query string. So if the user reloads he will not get that toast again - it's one time.

You can then add a listener anywhere that makes sense (a Layout, a Page):

onRouteEvent("payment-successful", () => {
    success("Payment Successful!")
    void goTo({ name: "receipt" }, "Page")
})

You can have 3 granularity steps on where to put those listeners:

• AppPage (Root): Will be executed on any route
• Layout: Will be executed on Routes that use this Layout
• Page: Will only be executed on that specific Route