Hooks

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

onAfterRouteEnter: (to, context) => {
   ...
}

Lifecycle

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

Context

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

Property	Description
from	What was the route prior to the hook's execution
push	Convenient way to move the user from wherever they were to a new route.
replace	Same as push, but with options: { replace: true }.
reject	Trigger 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:

Property	Description
abort	Stops the router from continuing with route change

See BeforeRouteHookContext

Levels

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

Global

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

Route

const routes = [
  createRoute({
    name: 'Home',
    onAfterRouteEnter: (to, context) => {
      ...
    }
  })
]

Component

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

import { onBeforeRouteLeave } from '@kitbag/router'

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

WARNING

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