Skip to content


Hooks offer a way to register callbacks on router lifecycle events.

onAfterRouteEnter: (to, context) => {


Before Hooks

  • onBeforeRouteEnter: Triggered before a route gets mounted.
  • onBeforeRouteUpdate: Triggered before a route changes. Specifically when the route changed but that parent or child didn’t.
  • onBeforeRouteLeave: Triggered before a route is about to be unmounted

After Hooks

  • onAfterRouteLeave: Triggered after a route gets unmounted.
  • onAfterRouteUpdate: Triggered after a route changes. Specifically when the route changed but that parent or child didn’t.
  • onAfterRouteEnter: Triggered after a route is mounted


The router provides to and a context argument to your hook callback. The context will always include:

fromWhat was the route prior to the hook's execution
pushConvenient way to move the user from wherever they were to a new route.
replaceSame as push, but with options: { replace: true }.
rejectTrigger a rejection for the router to handle

See AfterRouteHookContext

If the hooks lifecycle is a before hook, you'll also have access to the following property in your context:

abortStops the router from continuing with route change

See BeforeRouteHookContext


Hooks can be registered globally, on your route, or from within a component. This is useful for both providing the most convenient dx, but also can be a useful tool for ensuring proper execution order of your business logic.

Execution Order

  1. Global hooks
  2. Route hooks
  3. Component Hooks


router.onAfterRouteEnter((to, context) => {


const routes = createRoutes([
    name: 'Home',
    path: '/',
    onAfterRouteEnter: (to, context) => {


In order to register a hook from within a component, you must use the composition API.

import { onBeforeRouteLeave } from '@kitbag/router'

onAfterRouteEnter((to, context) => {


You cannot register onBeforeRouteEnter from within a component, since the component must have been mounted to discover the hook.