@gluonjs/core / packages/router/src / Router

Interface: Router<Routes>

Type Parameters

Routes

Routes extends RouteNamedMap = RouteNamedMap

Properties

currentRoute

readonly currentRoute: Readonly<Ref<RouteLocationNormalized>>

---

history

readonly history: RouterHistory

Methods

addRoute()

addRoute(record, parentName?): () => void

Parameters

record

RouteRecordRaw

parentName?

string

Returns

() => void

---

afterEach()

afterEach(hook): () => void

Parameters

hook

AfterNavigationHook

Returns

() => void

---

back()

back(): void

Returns

void

---

beforeEach()

beforeEach(guard): () => void

Parameters

guard

NavigationGuard

Returns

() => void

---

beforeResolve()

beforeResolve(guard): () => void

Parameters

guard

NavigationGuard

Returns

() => void

---

dehydrate()

dehydrate(): RouterSnapshot

Returns

RouterSnapshot

---

destroy()

destroy(): void

Returns

void

---

forward()

forward(): void

Returns

void

---

getRouteComponent()

getRouteComponent(record, name?): RouteComponent | undefined

Parameters

record

RouteRecordNormalized

name?

string

Returns

RouteComponent | undefined

---

getRoutes()

getRoutes(): readonly RouteRecordNormalized[]

Returns

readonly RouteRecordNormalized[]

---

go()

go(delta): void

Parameters

delta

number

Returns

void

---

hasRoute()

hasRoute(name): boolean

Parameters

name

string

Returns

boolean

---

hydrate()

hydrate(snapshot): Promise<NavigationFailure | undefined>

Parameters

snapshot

RouterSnapshot

Returns

Promise<NavigationFailure | undefined>

---

isReady()

isReady(): Promise<void>

Returns

Promise<void>

---

onError()

onError(handler): () => void

Parameters

handler

(error) => void

Returns

() => void

---

push()

push(to): Promise<NavigationFailure | undefined>

Parameters

to

RouteLocationRaw<Routes>

Returns

Promise<NavigationFailure | undefined>

---

removeRoute()

removeRoute(name): void

Parameters

name

string

Returns

void

---

replace()

replace(to): Promise<NavigationFailure | undefined>

Parameters

to

RouteLocationRaw<Routes>

Returns

Promise<NavigationFailure | undefined>

---

resolve()

resolve(to): RouteLocationNormalized

Parameters

to

RouteLocationRaw<Routes>

Returns

RouteLocationNormalized

Example

Own route resolution, navigation hooks, history traversal, dynamic records, readiness, snapshots, and cleanup through one Router instance:

import {
  NavigationFailureType,
  createMemoryHistory,
  createRouter,
  isNavigationFailure,
  type AfterNavigationHook,
  type NavigationFailure,
  type NavigationFailureTypeValue,
  type NavigationGuard,
  type NavigationGuardReturn,
  type RouteLocationNormalized,
  type RouteLocationPath,
  type RouteLocationRaw,
  type Router,
  type RouterSnapshot,
  type ScrollBehavior,
} from '@gluonjs/router';

const target = { path: '/checkout', query: { step: 2 } } satisfies RouteLocationPath;
const rawTarget: RouteLocationRaw = target;
const guardResult: NavigationGuardReturn = true;
const requireCart: NavigationGuard = (to: RouteLocationNormalized) =>
  to.path === '/checkout' ? guardResult : true;
const restoreScroll: ScrollBehavior = (_to, _from, savedPosition) =>
  savedPosition ?? { left: 0, top: 0 };
const afterEach: AfterNavigationHook = (to, from, failure?: NavigationFailure) =>
  console.log(`${from.fullPath} -> ${to.fullPath}`, failure?.message);

const router: Router = createRouter({
  history: createMemoryHistory(['/shop']),
  routes: [{ path: '/shop' }, { path: '/checkout' }],
  scrollBehavior: restoreScroll,
});
const stopGuard = router.beforeEach(requireCart);
const stopAfter = router.afterEach(afterEach);
const failure = await router.push(rawTarget);
const failureType: NavigationFailureTypeValue = NavigationFailureType.aborted;
if (isNavigationFailure(failure, failureType)) console.warn(failure.to.fullPath);
const snapshot: RouterSnapshot = router.dehydrate();
console.log(snapshot.location, router.currentRoute.value.fullPath);
stopGuard();
stopAfter();
router.destroy();