' }
const routes = [
createRoute({ name: 'home', path: '/', component: Home }),
createRoute({ name: 'path', path: '/about', component: About }),
] as const
```
> [!NOTE] Type Safety
> Using `as const` when defining routes is important as it ensures the types are correctly inferred.
## Create Router
A router is created using the [`createRouter`](https://kitbag-router.netlify.app/api/functions/createRouter) utility and passing in the routes.
```ts
import { createRouter } from '@kitbag/router'
const router = createRouter(routes)
```
## Vue Plugin
Create a router instance and pass it to the app as a plugin
```ts {6}
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
```
## Type Safety
Kitbag Router utilizes [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) to provide the internal types to match the actual router you're using.
```ts
declare module '@kitbag/router' {
interface Register {
router: typeof router
}
}
```
This means then when you import a component, composition, or hook from `@kitbag/router` it will be correctly typed. Alternatively, you can create your own typed router assets by using the [`createRouterAssets`](https://kitbag-router.netlify.app/api/functions/createRouterAssets) utility. This approach is especially useful for projects that use multiple routers.
## RouterView
Give your route components a place to be mounted
```html
```
This component can be mounted anywhere you want route components to be mounted. Nested routes can also have a nested `RouterView` which would be responsible for rendering any children that route may have. Read more about [nested routes](https://kitbag-router.netlify.app/core-concepts/routes#parent).
## RouterLink
Use RouterLink for navigating between routes.
```html
Home
```
### Type Safety in RouterLink
The `to` prop accepts a callback function or a [`Url`](https://kitbag-router.netlify.app/api/types/Url) string. When using a callback function, the router will provide a `resolve` function that is a type safe way to create link for your pre-defined routes.
================================================
FILE: docs/.vitepress/config.ts
================================================
import { defineConfig } from 'vitepress'
import typedocSidebar from '../api/typedoc-sidebar.json';
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "Kitbag Router | Type safe router for Vue.js",
description: "Type safe router for Vue.js",
head: [
['link', { rel: 'icon', href: '/favicon.ico' }],
// Vue School Top banner
[
'script',
{
src: 'https://media.bitterbrains.com/main.js?from=KITBAG&type=top',
// @ts-expect-error: vitepress bug
async: true,
type: 'text/javascript',
},
],
],
themeConfig: {
logo: '/kitbag-logo-circle.svg',
siteTitle: 'Kitbag Router',
editLink: {
pattern: 'https://github.com/kitbagjs/router/edit/main/docs/:path',
text: 'Suggest changes to this page',
},
nav: [
{ text: 'Guide', link: '/introduction' },
{ text: 'API', link: '/api/index' }
],
search: {
provider: 'local'
},
sidebar: {
'/api/': typedocSidebar,
'/': [
{
text: 'Getting Started',
items: [
{
text: 'Introduction',
link: '/introduction',
},
{
text: 'Quick Start',
link: '/quick-start',
},
],
},
{
text: 'Core Concepts',
items: [
{ text: 'Routes', link: '/core-concepts/routes' },
{ text: 'External Routes', link: '/core-concepts/external-routes' },
{ text: 'Params', link: '/core-concepts/params' },
{ text: 'Props', link: '/core-concepts/component-props' },
{ text: 'Router', link: '/core-concepts/router' },
{ text: 'Router Route', link: '/core-concepts/router-route' },
{ text: 'Navigation', link: '/core-concepts/navigation' },
],
},
{
text: 'Components',
items: [
{ text: 'RouterView', link: '/components/router-view' },
{ text: 'RouterLink', link: '/components/router-link' },
],
},
{
text: 'Composables',
items: [
{ text: 'useLink', link: '/composables/useLink' },
{ text: 'useQueryValue', link: '/composables/useQueryValue' },
{ text: 'useRoute', link: '/composables/useRoute' },
{ text: 'useRouter', link: '/composables/useRouter' },
],
},
{
text: 'Advanced Concepts',
items: [
{ text: 'Route Matching', link: '/advanced-concepts/route-matching' },
{ text: 'Route Narrowing', link: '/advanced-concepts/route-narrowing' },
{ text: 'Rejections', link: '/advanced-concepts/rejections' },
{ text: 'Redirects', link: '/advanced-concepts/redirects' },
{ text: 'Hooks', link: '/advanced-concepts/hooks' },
{ text: 'Plugins', link: '/advanced-concepts/plugins' },
{ text: 'Route Meta', link: '/advanced-concepts/route-meta' },
{ text: 'Route State', link: '/advanced-concepts/route-state' },
{ text: 'Prefetching', link: '/advanced-concepts/prefetching' },
],
},
{
text: "Migrating from vue-router",
link: "/migrating-vue-router"
}
]
},
socialLinks: [
{
icon: {
svg: ``
},
link: 'https://kitbag.dev',
ariaLabel: 'Kitbag Home'
},
{ icon: 'github', link: 'https://github.com/kitbagjs/router' },
{ icon: 'discord', link: 'https://discord.gg/zw7dpcc5HV' },
{ icon: 'npm', link: 'https://www.npmjs.com/package/@kitbag/router' },
]
},
markdown: {
image: {
lazyLoading: true
}
}
})
================================================
FILE: docs/.vitepress/theme/index.js
================================================
import DefaultTheme from 'vitepress/theme'
import './styles/vars.css'
export default DefaultTheme
================================================
FILE: docs/.vitepress/theme/styles/vars.css
================================================
:root {
--kitbag-orange-300: rgba(254, 168, 68, 1);
--kitbag-orange-500: rgba(212, 80, 66, 1);
--kitbag-orange-700: rgba(239, 31, 68, 1);
--kitbag-orange-700-75: rgba(239, 31, 68, 0.75);
--vp-button-brand-bg: var(--kitbag-orange-700-75);
--vp-c-brand-1: var(--kitbag-orange-500);
--vp-c-brand-2: var(--kitbag-orange-700);
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
120deg,
var(--kitbag-orange-300) 30%,
var(--kitbag-orange-700)
);
--vp-home-hero-image-background-image: linear-gradient(
-45deg,
var(--kitbag-orange-300) 50%,
var(--kitbag-orange-700) 50%
);
--vp-home-hero-image-filter: blur(40px);
}
a.alt.stackblitz {
display: flex;
align-items: center;
color: rgb(19, 137, 253);
gap: 0.2rem;
}
a.alt.stackblitz::after {
display: block;
height: 14px;
width: 14px;
content: '';
background-image: url('/stackblitz.svg');
}
/* BitterBrains banner offset */
html.has-bb-banner.bb-type-top {
--vp-layout-top-height: 72px;
}
html.has-bb-banner.bb-type-top.bb-banner-hidden {
--vp-layout-top-height: 0px;
}
================================================
FILE: docs/advanced-concepts/hooks.md
================================================
# Hooks
Hooks offer a way to register callbacks on router lifecycle events.
```ts
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
### On Error
- **onError** Triggered whenever an unexpected error is thrown. Error hooks are run in the order they were registered. The hook is provided both the error and the [error context](/advanced-concepts/hooks#error-context).
### On Rejection
- **onRejection** Triggered whenever a rejection is triggered. Rejection hooks are run in the order they were registered. The hook is provided both the rejection and the [rejection context](/advanced-concepts/hooks#rejection-context).
## 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](/advanced-concepts/rejections) for the router to handle |
If the hooks lifecycle is a [before](/advanced-concepts/hooks#before-hooks) hook, you'll also have access to the following property in your context:
| Property | Description |
| ---- | ---- |
| abort | Stops the router from continuing with route change |
### Error Context
If the hook is `onError`, you'll also have access to the following properties in your context:
| Property | Description |
| ---- | ---- |
| to | What was the destination route prior to the error being thrown |
| source | String value indicating where the error occurred. Possible values are `'props'`, `'hook'`, and `'component'` |
### Rejection Context
If the hook is `onRejection`, you'll also have access to the following properties in your context:
| Property | Description |
| ---- | ---- |
| to | What was the destination route prior to the rejection being triggered |
| from | What was the route prior to the rejection being triggered |
## Levels
Hooks can be registered **globally**, on your **route**, or from within a **component**. This is useful for both providing the most convenient devx, but also can be a useful tool for ensuring proper execution order of your business logic.
### Execution Order
1. Global before hooks
2. Route before hooks
3. Component before hooks
4. Component after hooks
5. Route after hooks
6. Global after hooks
### Global
```ts
router.onAfterRouteEnter((to, context) => {
...
})
```
### Route
```ts
route.onAfterRouteEnter((to, context) => {
...
})
```
### Rejection
```ts
rejection.onRejection((rejection, context) => {
...
})
```
### Component
In order to register a hook from within a component, you must use the [composition API](https://vuejs.org/guide/extras/composition-api-faq.html#composition-api-faq).
```ts
import { onBeforeRouteLeave } from '@kitbag/router'
onAfterRouteEnter((to, context) => {
...
})
```
:::warning
You cannot register `onBeforeRouteEnter` or `onAfterRouteEnter` hooks from within a component, since the component must have been mounted to discover the hook.
:::
## Global Injection
Hooks are run within the context of the Vue app the router is installed. This means you can use vue's `inject` function to access global values.
```ts
import { inject } from 'vue'
router.onAfterRouteEnter(() => {
const value = inject('global')
...
})
```
================================================
FILE: docs/advanced-concepts/plugins.md
================================================
# Plugins
Plugins are a way to extend the router with additional functionality. They are used to add routes and rejections to the router.
```ts
import { createRouterPlugin } from '@kitbag/router'
const routes = [
createRoute({ name: 'home', path: '/' }),
] as const
const rejections = [
createRejection({ type: 'RequiresAuth' }),
] as const
const plugin = createRouterPlugin({
routes,
rejections,
})
```
## Hooks
Plugins can also define global [Hooks](/advanced-concepts/hooks).
```ts
plugin.onBeforeRouteEnter(() => {
console.log('before route enter')
})
```
================================================
FILE: docs/advanced-concepts/prefetching.md
================================================
# Prefetching
Prefetching is a powerful feature in Kitbag Router that allows your application to start loading dependencies before users navigate, improving user experience by reducing the wait time when navigating.
## Prefetching Components
When your route component is defined using `defineAsyncComponent`, Kitbag Router can start fetching that component asynchronously before it is needed.
```ts
import { defineAsyncComponent } from 'vue'
const user = createRoute({
name: 'user',
path: '/user/[id]',
component: defineAsyncComponent(() => import('./UserPage.vue')), // [!code focus]
})
```
## Prefetching Props
When your route uses the [props callback](/core-concepts/component-props), Kitbag Router can start fetching your component props before they are needed.
```ts {5-9}
const user = createRoute({
name: 'user',
path: '/user/[id]',
component: defineAsyncComponent(() => import('./UserPage.vue')),
}, async (({ id }) => {
const user = await userStore.getById(id)
return { user }
})
```
::: info
Props for routes and any parent routes are collected concurrently while components are being mounted. This avoids a waterfall from happening for async props.
:::
## How Prefetching Works
Prefetching is handled automatically when using the `router-link` component or the `useLink` composable based on the prefetch strategy determined for that specific link.
## Prefetch Strategies
The following prefetch strategies are supported:
- `eager` - Prefetch immediately when the link is rendered.
- `lazy` - Prefetch when the link is visible in the viewport.
- `intent` - Prefetch when the link is focused or hovered.
## Configuration
Prefetching can be configured at various levels. Each nested layer **overrides** the parent configuration.
- Global Configuration
- Per-Route Configuration
- Per-Link Configuration
This means that if prefetching is enabled globally, but disabled for a specific route, that route will not prefetch. Conversely, if prefetching is disabled globally, but enabled for a specific route, that route will prefetch.
Prefetching can be configured with a `boolean`, a `PrefetchStrategy`, or a `PrefetchConfigOptions` object.
::: code-group
```ts [boolean]
prefetch: true
```
```ts [PrefetchStrategy]
prefetch: 'lazy'
```
```ts [PrefetchConfigOptions]
prefetch: {
components: 'eager',
props: false,
}
```
:::
::: info
If the prefetch configuration is `true`, Kitbag Router will look at any overriden prefetch configs for a strategy. If no stragety is configured the default strategy `lazy` is used.
:::
### Global Configuration
By default, prefetching components is enabled and prefetching props is disabled. However, you can modify prefetching globally in your router instance by setting the `options.prefetch` property.
```ts
import { createRouter } from 'kitbag-router';
const router = createRouter({
options: {
prefetch: false, // all prefetching is disabled by default
},
});
```
### Per-Route Configuration
If you want to enable or disable prefetching for specific routes, you can do so by adding a prefetch property to your route definition.
```ts
const about = createRoute({
path: '/about',
component: () => import('./About.vue'),
prefetch: true, // enable prefetching for this route
})
const contact = createRoute({
path: '/contact',
component: () => import('./Contact.vue'),
prefetch: false, // disable prefetching for this route
})
```
### Per-Link Configuration
You can also control prefetching at the level of individual router-links by passing a prefetch prop.
```html
About UsAbout UsContact Us
```
Similarly, when using the `useLink` composable, you can pass a prefetch option.
```ts
import { useLink } from 'kitbag-router';
const link = useLink({
to: '/about',
prefetch: true, // enable prefetching for this link
});
```
================================================
FILE: docs/advanced-concepts/redirects.md
================================================
# Redirects
Redirects provide a declarative way to automatically redirect from one route to another. This is useful for handling URL migrations or implementing redirect logic based on route parameters.
## Route Redirects
Route redirects allow you to define redirect relationships between routes. When a user navigates to a route that has a redirect configured, the router will automatically redirect them to the target route.
There are two methods available on route objects for creating redirects:
- **`redirectTo`**: Redirects the current route to another route
- **`redirectFrom`**: Redirects from another route to the current route
## Basic Usage
### Using `redirectTo`
The `redirectTo` method is called on the source route (the route you want to redirect from) and takes the destination route as an argument.
```ts
import { createRoute, createRouter } from '@kitbag/router'
const home = createRoute({
name: 'home',
path: '/home',
})
const dashboard = createRoute({
name: 'dashboard',
path: '/dashboard',
})
// Redirect from 'home' to 'dashboard'
home.redirectTo(dashboard)
```
### Using `redirectFrom`
The `redirectFrom` method is called on the destination route (the route you want to redirect to) and takes the source route as an argument.
```ts
import { createRoute, createRouter } from '@kitbag/router'
const home = createRoute({
name: 'home',
path: '/home',
})
const dashboard = createRoute({
name: 'dashboard',
path: '/dashboard',
})
// Redirect from 'home' to 'dashboard'
dashboard.redirectFrom(home)
```
Both approaches achieve the same result. Choose the one that feels more natural for your use case:
- Use `redirectTo` when you're working with the source route and want to specify where it should redirect
- Use `redirectFrom` when you're working with the destination route and want to specify which routes should redirect to it
## Parameters
When redirecting between routes with parameters, you can provide a callback function to convert parameters from the source route to the destination route.
### Converting Path Parameters
```ts
import { createRoute, createRouter } from '@kitbag/router'
const oldPost = createRoute({
name: 'old-post',
path: '/blog/[blogId]',
})
const newPost = createRoute({
name: 'new-post',
path: '/articles/[articleId]',
})
// Convert 'blogId' parameter to 'articleId'
oldPost.redirectTo(newPost, ({ blogId }) => {
return { articleId: blogId }
})
```
## Restrictions
### One Redirect Per Route
Each route can only have one redirect configured. Attempting to configure multiple redirects for the same route will throw a `MultipleRouteRedirectsError`.
```ts
import { createRoute } from '@kitbag/router'
const routeA = createRoute({ name: 'a', path: '/a' })
const routeB = createRoute({ name: 'b', path: '/b' })
const routeC = createRoute({ name: 'c', path: '/c' })
routeA.redirectTo(routeB)
// This will throw MultipleRouteRedirectsError
routeA.redirectTo(routeC) // ❌ Error (routeA already redirects to routeB)
routeB.redirectFrom(routeA) // ❌ Error (routeA already redirects to routeB)
```
================================================
FILE: docs/advanced-concepts/rejections.md
================================================
# Rejections
Kitbag Router ships with built in support for rejection handling. Each rejection type you need is registered with a corresponding view, if rejections happen at any point in the router lifecycle the router will handle it.
## Rejection Types
Creating custom rejections is extremely easily with the [`createRejection`](/api/functions/createRejection) utility. For example, we can add a custom rejection for "AuthNeeded".
```ts
import { createRejection, createRouter } from '@kitbag/router'
const authNeededRejection = createRejection({
type: 'AuthNeeded',
})
export const router = createRouter(routes, {
rejections: [authNeededRejection]
})
```
## Rejection Component
When a rejection happens, Kitbag router mounts whatever component you passed in to the `component` property. If no component was assigned, Kitbag router will use the default rejection component that ships with Kitbag Router.
```ts {1,5}
import LoginView from '@/views/LoginView.vue'
const authNeededRejection = createRejection({
type: 'AuthNeeded',
component: LoginView,
})
```
Now if your `AuthNeeded` rejection is triggered, the `LoginView` component will be mounted.
## Built-In Rejections
Every new router has a `NotFound` rejection by default. This enables the default behavior of the router when it's given a URL that doesn't match any of your routes. Instead of the user having to define a 404/catch-all route, Kitbag router solves this problem for you.
### Overriding Built-In Rejection Components
You'll probably want to provide your own component to display to users when they end up somewhere unexpected. To override the default behavior, simply create a new rejection with the same name that includes your desired component.
```ts
import NotFoundPage from '@/components/NotFoundPage.vue'
const notFoundRejection = createRejection({
type: 'NotFound',
component: NotFoundPage,
})
export const router = createRouter(routes, {
rejections: [notFoundRejection]
})
```
## Trigger Rejection
Any of the [hooks](/advanced-concepts/hooks) will provided a `reject` function in the context argument. The [async prop function](/core-concepts/component-props#async-prop-fetching) argument of `createRoute` also will provide a `reject` function.
```ts
route.onBeforeRouteEnter((to, { reject }) => {
reject('AuthNeeded')
})
```
Alternatively, you can always trigger a rejection from `router.reject`.
```ts
import { useRouter } from '@kitbag/router'
const router = useRouter()
function maybeAuthNeeded() {
...
router.reject('AuthNeeded')
}
```
### Get Rejection
Though it's uncommon, your rejection components could access to the current rejection with `useRejection` if you need it.
```ts
import { useRejection } from '@kitbag/router'
const rejection = useRejection()
const rejectionType = computed(() => rejection.value.type)
```
## Title
The `setTitle` callback is used to set the document title for the rejection. The callback is given the resolved route and a context object. The callback can be async, and should return a string that should be set as the document.title.
The context object has the following properties:
| Property | Type | Description |
| -------- | ---- | ----------- |
| from | ResolvedRoute | The route that is being navigated from. |
| getParentTitle | () => Promise | Promise that resolves to the title of the parent route. |
```ts
import { createRejection } from '@kitbag/router'
const authNeededRejection = createRejection({
type: 'AuthNeeded',
})
authNeededRejection.setTitle((to, context) => {
return `Unauthorized!`
})
```
================================================
FILE: docs/advanced-concepts/route-matching.md
================================================
# Route Matching
There are several rules Kitbag Router uses to determine which of your routes corresponds to the current URL.
## Named
Routes without a [name](/core-concepts/routes#name) property cannot be matched.
## External Routes
If a route is defined as [external](/core-concepts/external-routes), it will only be matched when the url is also external.
## Depth
A route’s depth is determined by the number of parent routes it has. The deeper the route, the higher the priority it has when matching.
```ts
const external = createExternalRoute({
name: 'external',
host: 'https://kitbag.dev',
path: '/about-us'
})
```
:white_check_mark: `https://kitbag.dev/about-us`
:x: `https://example.com/about-us`
:x: `/about-us`
## Path Matches
Routes `path` must match the structure of the URL pathname.
```ts
const route = createRoute({
...
path: '/parent/anything/child'
})
```
:white_check_mark: `parent/anything/child`
:x: `parent/123/child`
:x: `parent//child`
:x: `parent/child`
```ts
const route = createRoute({
...
path: '/parent/[myParam]/child'
})
```
:white_check_mark: `parent/anything/child`
:white_check_mark: `parent/123/child`
:x: `parent//child`
:x: `parent/child`
```ts
const route = createRoute({
...
path: '/parent/[?myParam]/child'
})
```
:white_check_mark: `parent/anything/child`
:white_check_mark: `parent/123/child`
:white_check_mark: `parent//child`
:x: `parent/child`
## Query Matches
Routes `query` must match the structure of the URL search.
```ts
const route = createRoute({
...
query: {
foo: 'bar',
},
})
```
:white_check_mark: `?foo=bar`
:white_check_mark: `?kitbag=cat&foo=bar`
:x: `?foo=123`
:x: `?foo`
```ts
const route = createRoute({
...
query: {
foo: String,
},
})
```
:white_check_mark: `?foo=bar`
:white_check_mark: `?kitbag=cat&foo=bar`
:white_check_mark: `?foo=123`
:x: `?foo`
```ts
const route = createRoute({
...
query: {
'?foo': String,
},
})
```
:white_check_mark: `?foo=bar`
:white_check_mark: `?kitbag=cat&foo=bar`
:white_check_mark: `?foo=123`
:white_check_mark: `?foo`
::: tip
when your query param is optional, the entire property can be missing and the route will still match. For the example above with query `foo=[?bar]`, the url might be `/my-route` without any query, or it might have an unrelated query `/my-route?other=value`, and still be a match because the entire foo param is optional.
:::
## Params Are Valid
Assuming a route's path and query match the structure of the URL, the last test is to make sure that values provided by the URL pass the Param parsing. By default params are assumed to be strings, so by default if structure matches, parsing will pass as well since the URL is a string. However, if you define your params with `Boolean`, `Number`, `Date`, `JSON`, or a custom `Param` the value will be need to pass the param's `get` function.
```ts
const route = createRoute({
...
path: '/parent/[id]'
query: {
'?tab': String,
},
})
```
:white_check_mark: `parent/123`
:white_check_mark: `parent/123?tab=true`
:white_check_mark: `parent/123?tab=github`
:white_check_mark: `parent/ABC?tab=true`
```ts
const route = createRoute({
...
path: withParams('/parent/[id]', { id: Number })
query: {
'?tab': String,
},
})
```
:white_check_mark: `parent/123`
:white_check_mark: `parent/123?tab=true`
:white_check_mark: `parent/123?tab=github`
:x: `parent/ABC?tab=true`
```ts
const route = createRoute({
...
path: withParams('/parent/[id]', { id: Number })
query: withParams('tab=[?tab]', { tab: Boolean })
})
```
:white_check_mark: `parent/123`
:white_check_mark: `parent/123?tab=true`
:x: `parent/123?tab=github`
:x: `parent/ABC?tab=true`
================================================
FILE: docs/advanced-concepts/route-meta.md
================================================
# Route Meta
It may be useful to store additional information about your route to be used in a hook, or within a component. Meta data might be useful for authorization, analytics, and much more. For example, below we will use route meta to configure the document title per route.
```ts
import { createRoute, createRouter } from '@kitbag/router'
const routes = [
createRoute({
name: 'home',
path: '/',
component: Home,
meta: {
pageTitle: 'Kitbag Home'
}
}),
createRoute({
name: 'path',
path: '/about',
component: About,
meta: {
pageTitle: 'Learn More About Kitbag'
}
}),
] as const
const router = createRouter(routes)
router.onAfterRouteEnter(to => {
document.title = to.matched.meta.pageTitle
})
```
## Meta Type
Types for meta defined on individual routes will just work. If you want to require certain properties be set on all routes, you can update the global type with [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html).
```ts
declare module '@kitbag/router' {
interface Register {
routeMeta: {
pageTitle?: string
}
}
}
```
## Cascading Meta
Meta will automatically cascade from parent routes down through child routes.
```ts
const parent = createRoute({
name: 'parent',
meta: {
public: true
}
})
const child = createRoute({
parent,
name: 'child',
})
// child has 'public: true'
child.meta.public
```
### Meta Property Conflict
Unlike other cascading properties like params, a child **can** also define duplicate keys in meta. However, in order for the types to be accurate child properties must match the `typeof` on the parent meta. When the router finds a duplicate key with conflicting types it will throw a [MetaPropertyConflict](/api/errors/MetaPropertyConflict) error.
================================================
FILE: docs/advanced-concepts/route-narrowing.md
================================================
# Route Narrowing
When accessing the current route or using the `useRoute` composable, by default the type is a union of all possible routes.
```ts
import { createRoute, createRouter } from '@kitbag/router'
const home = createRoute({
name: 'home',
path: '/',
component: ...,
})
const user = createRoute({
name: 'user',
path: '/user/[userId]',
component: ...,
})
const profile = createRoute({
parent: user,
name: 'user.profile',
path: '/profile',
query: '?tab=[tab]',
component: ...,
})
const settings = createRoute({
parent: user,
name: 'user.settings',
path: '/settings',
component: ...,
})
const router = createRouter([home, user, profile, settings])
router.route.name // "home" | "user" | "user.profile" | "user.settings"
```
This can be narrowed like any union in Typescript, by checking the route name.
```ts
if(router.route.name === 'user') {
router.route.name // "user"
router.route.params // { userId: string }
}
```
You can also use the `isRoute` type guard. You could write the same logic as above like this.
```ts
import { isRoute } from '@kitbag/router'
if(isRoute(router.route, 'user', { exact: true })) {
router.route.name // "user"
router.route.params // { userId: string }
}
```
The `isRoute` type guard offers more flexibility with the optional `exact` argument, which defaults to `false` and will return narrow to the target route or any of it's descendants.
```ts
import { isRoute } from '@kitbag/router'
if(isRoute(router.route, 'user', { exact: false })) {
router.route.name // "user" | "user.profile" | "user.settings"
router.route.params // { userId: string } | { userId: string, tab: string }
}
```
================================================
FILE: docs/advanced-concepts/route-state.md
================================================
# Route State
It may be useful to store state for a given route to improve your user's experience. In situations like a form that a user might fill out, it might be useful to store form values in the [browser state](https://developer.mozilla.org/en-US/docs/Web/API/History/state) so that if the user navigates unexpectedly the values can be restored when going back. Kitbag Router extends this functionality by offering the same [param experience](/core-concepts/params#param-types) on state as well.
```ts
import { createRoute } from '@kitbag/router'
const route = createRoute({
name: 'example-form',
state: {
email: String,
active: Boolean,
}
})
```
## Always Optional
State properties are always expected to be optional. The only exception to this is when your state property is defined with the `withDefault` utility.
```ts
const route = createRoute({
name: 'example-form',
state: {
email: String,
active: Boolean, // [!code --]
active: withDefault(Boolean, false), // [!code ++]
}
})
```
## Reading State
Accessing the runtime values can be found on a route's `state` property
```ts
const route = useRoute('example-form')
route.state.email
```
## Writing State
There is a `state` property on router `push` and `replace`, which can be used to set state according to the routes state params.
```ts
router.push('example-form', {}, {
email: 'mittens@kitbag.dev',
})
```
The state values on the route are **writable**. This means that you can just modify the values directly and Kitbag Router will handle the communication with browser to update history state. You can use `route.update()` method which takes the same properties as `push()`.
================================================
FILE: docs/api/components/RouterLink.md
================================================
# Components: RouterLink
```ts
const RouterLink: RouterAssets["RouterLink"];
```
A component to render a link to a route or any url.
## Param
The props to pass to the router link component.
## Returns
The router link component.
================================================
FILE: docs/api/components/RouterView.md
================================================
# Components: RouterView
```ts
const RouterView: RouterAssets["RouterView"];
```
A component to render the current route's component.
## Param
The props to pass to the router view component.
## Returns
The router view component.
================================================
FILE: docs/api/compositions/useLink.md
================================================
# Compositions: useLink
```ts
const useLink: RouterAssets["useLink"];
```
A composition to export much of the functionality that drives RouterLink component.
Also exports some useful context about routes relationship to current URL and convenience methods
for navigating.
## Param
The name of the route or a valid URL.
## Param
If providing route name, this argument will expect corresponding params.
## Param
[RouterResolveOptions](../types/RouterResolveOptions.md) Same options as router resolve.
## Returns
Reactive context values for as well as navigation methods.
================================================
FILE: docs/api/compositions/useQueryValue.md
================================================
# Compositions: useQueryValue
```ts
const useQueryValue: RouterAssets["useQueryValue"];
```
A composition to access a specific query value from the current route.
## Returns
The query value from the router.
================================================
FILE: docs/api/compositions/useRejection.md
================================================
# Compositions: useRejection
```ts
const useRejection: RouterAssets["useRejection"];
```
A composition to access the rejection from the router.
## Returns
The rejection from the router.
================================================
FILE: docs/api/compositions/useRoute.md
================================================
# Compositions: useRoute
```ts
const useRoute: RouterAssets["useRoute"];
```
A composition to access the current route or verify a specific route name within a Vue component.
This function provides two overloads:
1. When called without arguments, it returns the current route from the router without types.
2. When called with a route name, it checks if the current active route includes the specified route name.
The function also sets up a reactive watcher on the route object from the router to continually check the validity of the route name
if provided, throwing an error if the validation fails at any point during the component's lifecycle.
## Template
A string type that should match route name of the registered router, ensuring the route name exists.
## Param
Optional. The name of the route to validate against the current active routes.
## Returns
The current router route. If a route name is provided, it validates the route name first.
## Throws
Throws an error if the provided route name is not valid or does not match the current route.
================================================
FILE: docs/api/compositions/useRouter.md
================================================
# Compositions: useRouter
```ts
const useRouter: RouterAssets["useRouter"];
```
A composition to access the installed router instance within a Vue component.
## Returns
The installed router instance.
## Throws
Throws an error if the router has not been installed,
ensuring the component does not operate without routing functionality.
================================================
FILE: docs/api/errors/DuplicateParamsError.md
================================================
# Errors: DuplicateParamsError
An error thrown when duplicate parameters are detected in a route.
Param names must be unique. This includes params defined in a path
parent and params defined in the query.
## Extends
- `Error`
## Constructors
### Constructor
```ts
new DuplicateParamsError(paramName): DuplicateParamsError;
```
Constructs a new DuplicateParamsError instance with a message indicating the problematic parameter.
#### Parameters
| Parameter | Type | Description |
| ------ | ------ | ------ |
| `paramName` | `string` | The name of the parameter that was duplicated. |
#### Returns
`DuplicateParamsError`
#### Overrides
```ts
Error.constructor
```
## Methods
### captureStackTrace()
```ts
static captureStackTrace(targetObject, constructorOpt?): void;
```
Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.
```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack; // Similar to `new Error().stack`
```
The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.
The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.
The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:
```js
function a() {
b();
}
function b() {
c();
}
function c() {
// Create an error without stack trace to avoid calculating the stack trace twice.
const { stackTraceLimit } = Error;
Error.stackTraceLimit = 0;
const error = new Error();
Error.stackTraceLimit = stackTraceLimit;
// Capture the stack trace above function b
Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
throw error;
}
a();
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |
#### Returns
`void`
#### Inherited from
```ts
Error.captureStackTrace
```
***
### isError()
```ts
static isError(error): error is Error;
```
Indicates whether the argument provided is a built-in Error instance or not.
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
#### Returns
`error is Error`
#### Inherited from
```ts
Error.isError
```
***
### prepareStackTrace()
```ts
static prepareStackTrace(err, stackTraces): any;
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`[] |
#### Returns
`any`
#### See
https://v8.dev/docs/stack-trace-api#customizing-stack-traces
#### Inherited from
```ts
Error.prepareStackTrace
```
## Properties
| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
| `cause?` | `public` | `unknown` | - | `Error.cause` |
| `message` | `public` | `string` | - | `Error.message` |
| `name` | `public` | `string` | - | `Error.name` |
| `stack?` | `public` | `string` | - | `Error.stack` |
| `stackTraceLimit` | `static` | `number` | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | `Error.stackTraceLimit` |
================================================
FILE: docs/api/errors/MetaPropertyConflict.md
================================================
# Errors: MetaPropertyConflict
An error thrown when a parent's meta has the same key as a child and the types are not compatible.
A child's meta can override properties of the parent, however the types must match!
## Extends
- `Error`
## Constructors
### Constructor
```ts
new MetaPropertyConflict(property?): MetaPropertyConflict;
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `property?` | `string` |
#### Returns
`MetaPropertyConflict`
#### Overrides
```ts
Error.constructor
```
## Methods
### captureStackTrace()
```ts
static captureStackTrace(targetObject, constructorOpt?): void;
```
Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.
```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack; // Similar to `new Error().stack`
```
The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.
The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.
The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:
```js
function a() {
b();
}
function b() {
c();
}
function c() {
// Create an error without stack trace to avoid calculating the stack trace twice.
const { stackTraceLimit } = Error;
Error.stackTraceLimit = 0;
const error = new Error();
Error.stackTraceLimit = stackTraceLimit;
// Capture the stack trace above function b
Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
throw error;
}
a();
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |
#### Returns
`void`
#### Inherited from
```ts
Error.captureStackTrace
```
***
### isError()
```ts
static isError(error): error is Error;
```
Indicates whether the argument provided is a built-in Error instance or not.
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
#### Returns
`error is Error`
#### Inherited from
```ts
Error.isError
```
***
### prepareStackTrace()
```ts
static prepareStackTrace(err, stackTraces): any;
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`[] |
#### Returns
`any`
#### See
https://v8.dev/docs/stack-trace-api#customizing-stack-traces
#### Inherited from
```ts
Error.prepareStackTrace
```
## Properties
| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
| `cause?` | `public` | `unknown` | - | `Error.cause` |
| `message` | `public` | `string` | - | `Error.message` |
| `name` | `public` | `string` | - | `Error.name` |
| `stack?` | `public` | `string` | - | `Error.stack` |
| `stackTraceLimit` | `static` | `number` | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | `Error.stackTraceLimit` |
================================================
FILE: docs/api/errors/RouterNotInstalledError.md
================================================
# Errors: RouterNotInstalledError
An error thrown when an attempt is made to use routing functionality before the router has been installed.
## Extends
- `Error`
## Constructors
### Constructor
```ts
new RouterNotInstalledError(): RouterNotInstalledError;
```
#### Returns
`RouterNotInstalledError`
#### Overrides
```ts
Error.constructor
```
## Methods
### captureStackTrace()
```ts
static captureStackTrace(targetObject, constructorOpt?): void;
```
Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.
```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack; // Similar to `new Error().stack`
```
The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.
The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.
The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:
```js
function a() {
b();
}
function b() {
c();
}
function c() {
// Create an error without stack trace to avoid calculating the stack trace twice.
const { stackTraceLimit } = Error;
Error.stackTraceLimit = 0;
const error = new Error();
Error.stackTraceLimit = stackTraceLimit;
// Capture the stack trace above function b
Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
throw error;
}
a();
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |
#### Returns
`void`
#### Inherited from
```ts
Error.captureStackTrace
```
***
### isError()
```ts
static isError(error): error is Error;
```
Indicates whether the argument provided is a built-in Error instance or not.
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
#### Returns
`error is Error`
#### Inherited from
```ts
Error.isError
```
***
### prepareStackTrace()
```ts
static prepareStackTrace(err, stackTraces): any;
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`[] |
#### Returns
`any`
#### See
https://v8.dev/docs/stack-trace-api#customizing-stack-traces
#### Inherited from
```ts
Error.prepareStackTrace
```
## Properties
| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
| `cause?` | `public` | `unknown` | - | `Error.cause` |
| `message` | `public` | `string` | - | `Error.message` |
| `name` | `public` | `string` | - | `Error.name` |
| `stack?` | `public` | `string` | - | `Error.stack` |
| `stackTraceLimit` | `static` | `number` | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | `Error.stackTraceLimit` |
================================================
FILE: docs/api/errors/UseRouteInvalidError.md
================================================
# Errors: UseRouteInvalidError
An error thrown when there is a mismatch between an expected route and the one actually used.
## Extends
- `Error`
## Constructors
### Constructor
```ts
new UseRouteInvalidError(routeName, actualRouteName): UseRouteInvalidError;
```
Constructs a new UseRouteInvalidError instance with a message that specifies both the given and expected route names.
This detailed error message aids in quickly identifying and resolving mismatches in route usage.
#### Parameters
| Parameter | Type | Description |
| ------ | ------ | ------ |
| `routeName` | `string` | The route name that was incorrectly used. |
| `actualRouteName` | `string` | The expected route name that should have been used. |
#### Returns
`UseRouteInvalidError`
#### Overrides
```ts
Error.constructor
```
## Methods
### captureStackTrace()
```ts
static captureStackTrace(targetObject, constructorOpt?): void;
```
Creates a `.stack` property on `targetObject`, which when accessed returns
a string representing the location in the code at which
`Error.captureStackTrace()` was called.
```js
const myObject = {};
Error.captureStackTrace(myObject);
myObject.stack; // Similar to `new Error().stack`
```
The first line of the trace will be prefixed with
`${myObject.name}: ${myObject.message}`.
The optional `constructorOpt` argument accepts a function. If given, all frames
above `constructorOpt`, including `constructorOpt`, will be omitted from the
generated stack trace.
The `constructorOpt` argument is useful for hiding implementation
details of error generation from the user. For instance:
```js
function a() {
b();
}
function b() {
c();
}
function c() {
// Create an error without stack trace to avoid calculating the stack trace twice.
const { stackTraceLimit } = Error;
Error.stackTraceLimit = 0;
const error = new Error();
Error.stackTraceLimit = stackTraceLimit;
// Capture the stack trace above function b
Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
throw error;
}
a();
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |
#### Returns
`void`
#### Inherited from
```ts
Error.captureStackTrace
```
***
### isError()
```ts
static isError(error): error is Error;
```
Indicates whether the argument provided is a built-in Error instance or not.
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
#### Returns
`error is Error`
#### Inherited from
```ts
Error.isError
```
***
### prepareStackTrace()
```ts
static prepareStackTrace(err, stackTraces): any;
```
#### Parameters
| Parameter | Type |
| ------ | ------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`[] |
#### Returns
`any`
#### See
https://v8.dev/docs/stack-trace-api#customizing-stack-traces
#### Inherited from
```ts
Error.prepareStackTrace
```
## Properties
| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
| `cause?` | `public` | `unknown` | - | `Error.cause` |
| `message` | `public` | `string` | - | `Error.message` |
| `name` | `public` | `string` | - | `Error.name` |
| `stack?` | `public` | `string` | - | `Error.stack` |
| `stackTraceLimit` | `static` | `number` | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | `Error.stackTraceLimit` |
================================================
FILE: docs/api/functions/arrayOf.md
================================================
# Functions: arrayOf()
```ts
function arrayOf(params, options?): ParamGetSet[]>;
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* [`Param`](../types/Param.md)[] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `params` | `T` |
| `options?` | `ArrayOfOptions` |
## Returns
[`ParamGetSet`](../types/ParamGetSet.md)\<`ExtractParamType`\<`T`\[`number`\]\>[]\>
================================================
FILE: docs/api/functions/asUrlString.md
================================================
# Functions: asUrlString()
```ts
function asUrlString(value): UrlString;
```
Converts a string to a valid URL.
## Parameters
| Parameter | Type | Description |
| ------ | ------ | ------ |
| `value` | `string` | The string to convert. |
## Returns
[`UrlString`](../types/UrlString.md)
The valid URL.
================================================
FILE: docs/api/functions/combineRoutes.md
================================================
# Functions: combineRoutes()
```ts
function combineRoutes(parent, child): Route;
```
## Parameters
| Parameter | Type |
| ------ | ------ |
| `parent` | [`Route`](../types/Route.md) |
| `child` | [`Route`](../types/Route.md) |
## Returns
[`Route`](../types/Route.md)
================================================
FILE: docs/api/functions/createExternalRoute.md
================================================
# Functions: createExternalRoute()
## Call Signature
```ts
function createExternalRoute(options): ToRoute & ExternalRouteHooks, TOptions["context"]> & RouteRedirects>;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TOptions` *extends* [`CreateRouteOptions`](../types/CreateRouteOptions.md) & [`WithHost`](../types/WithHost.md) & [`WithoutParent`](../types/WithoutParent.md) |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `TOptions` |
### Returns
[`ToRoute`](../types/ToRoute.md)\<`TOptions`\> & [`ExternalRouteHooks`](../types/ExternalRouteHooks.md)\<[`ToRoute`](../types/ToRoute.md)\<`TOptions`\>, `TOptions`\[`"context"`\]\> & `RouteRedirects`\<[`ToRoute`](../types/ToRoute.md)\<`TOptions`\>\>
## Call Signature
```ts
function createExternalRoute(options): ToRoute & ExternalRouteHooks, ExtractRouteContext> & RouteRedirects>;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TOptions` *extends* [`CreateRouteOptions`](../types/CreateRouteOptions.md) & [`WithoutHost`](../types/WithoutHost.md) & [`WithParent`](../types/WithParent.md) |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `TOptions` |
### Returns
[`ToRoute`](../types/ToRoute.md)\<`TOptions`\> & [`ExternalRouteHooks`](../types/ExternalRouteHooks.md)\<[`ToRoute`](../types/ToRoute.md)\<`TOptions`\>, `ExtractRouteContext`\<`TOptions`\>\> & `RouteRedirects`\<[`ToRoute`](../types/ToRoute.md)\<`TOptions`\>\>
================================================
FILE: docs/api/functions/createParam.md
================================================
# Functions: createParam()
## Call Signature
```ts
function createParam(param): TParam;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TParam` *extends* `Required`\<[`ParamGetSet`](../types/ParamGetSet.md)\<`unknown`\>\> |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `param` | `TParam` |
### Returns
`TParam`
## Call Signature
```ts
function createParam(param): ParamGetSet>;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TParam` *extends* [`Param`](../types/Param.md) |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `param` | `TParam` |
### Returns
[`ParamGetSet`](../types/ParamGetSet.md)\<`ExtractParamType`\<`TParam`\>\>
## Call Signature
```ts
function createParam(param, defaultValue): ParamWithDefault;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TParam` *extends* [`Param`](../types/Param.md) |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `param` | `TParam` |
| `defaultValue` | `NoInfer`\<`ExtractParamType`\<`TParam`\>\> |
### Returns
`ParamWithDefault`\<`TParam`\>
================================================
FILE: docs/api/functions/createRejection.md
================================================
# Functions: createRejection()
```ts
function createRejection(options): Rejection;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TType` *extends* `string` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | \{ `component?`: `Component`; `type`: `TType`; \} |
| `options.component?` | `Component` |
| `options.type` | `TType` |
## Returns
`Rejection`\<`TType`\>
================================================
FILE: docs/api/functions/createRoute.md
================================================
# Functions: createRoute()
```ts
function createRoute(options, ...args): ToRoute & InternalRouteHooks, ExtractRouteContext> & RouteRedirects>;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TOptions` *extends* [`CreateRouteOptions`](../types/CreateRouteOptions.md) |
| `TProps` *extends* \| [`PropsGetter`](../types/PropsGetter.md)\<`TOptions`, `any`\[`any`\]\> \| `RoutePropsRecord`\<`TOptions`, `any`\[`any`\]\> \| [`RouterViewPropsGetter`](../types/RouterViewPropsGetter.md)\<`TOptions`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `TOptions` |
| ...`args` | `CreateRouteWithProps`\<`TOptions`, `TProps`\> |
## Returns
[`ToRoute`](../types/ToRoute.md)\<`TOptions`, `TProps`\> & [`InternalRouteHooks`](../types/InternalRouteHooks.md)\<[`ToRoute`](../types/ToRoute.md)\<`TOptions`\>, `ExtractRouteContext`\<`TOptions`\>\> & `RouteRedirects`\<[`ToRoute`](../types/ToRoute.md)\<`TOptions`\>\>
================================================
FILE: docs/api/functions/createRouter.md
================================================
# Functions: createRouter()
## Call Signature
```ts
function createRouter(
routes,
options?,
plugins?): Router;
```
Creates a router instance for a Vue application, equipped with methods for route handling, lifecycle hooks, and state management.
### Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](../types/Routes.md) | - |
| `TOptions` *extends* [`RouterOptions`](../types/RouterOptions.md) | `object` |
| `TPlugin` *extends* [`RouterPlugin`](../types/RouterPlugin.md) | [`EmptyRouterPlugin`](../types/EmptyRouterPlugin.md) |
### Parameters
| Parameter | Type | Description |
| ------ | ------ | ------ |
| `routes` | `TRoutes` | [Routes](../types/Routes.md) An array of route definitions specifying the configuration of routes in the application. Use createRoute method to create the route definitions. |
| `options?` | `TOptions` | [RouterOptions](../types/RouterOptions.md) for the router, including history mode and initial URL settings. |
| `plugins?` | `TPlugin`[] | - |
### Returns
[`Router`](../types/Router.md)\<`TRoutes`, `TOptions`, `TPlugin`\>
Router instance
### Example
```ts
import { createRoute, createRouter } from '@kitbag/router'
const Home = { template: '
Home
' }
const About = { template: '
About
' }
export const routes = [
createRoute({ name: 'home', path: '/', component: Home }),
createRoute({ name: 'path', path: '/about', component: About }),
] as const
const router = createRouter(routes)
```
## Call Signature
```ts
function createRouter(
routes,
options?,
plugins?): Router;
```
Creates a router instance for a Vue application, equipped with methods for route handling, lifecycle hooks, and state management.
### Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](../types/Routes.md) | - |
| `TOptions` *extends* [`RouterOptions`](../types/RouterOptions.md) | `object` |
| `TPlugin` *extends* [`RouterPlugin`](../types/RouterPlugin.md) | [`EmptyRouterPlugin`](../types/EmptyRouterPlugin.md) |
### Parameters
| Parameter | Type | Description |
| ------ | ------ | ------ |
| `routes` | `TRoutes`[] | [Routes](../types/Routes.md) An array of route definitions specifying the configuration of routes in the application. Use createRoute method to create the route definitions. |
| `options?` | `TOptions` | [RouterOptions](../types/RouterOptions.md) for the router, including history mode and initial URL settings. |
| `plugins?` | `TPlugin`[] | - |
### Returns
[`Router`](../types/Router.md)\<`TRoutes`, `TOptions`, `TPlugin`\>
Router instance
### Example
```ts
import { createRoute, createRouter } from '@kitbag/router'
const Home = { template: '
Home
' }
const About = { template: '
About
' }
export const routes = [
createRoute({ name: 'home', path: '/', component: Home }),
createRoute({ name: 'path', path: '/about', component: About }),
] as const
const router = createRouter(routes)
```
================================================
FILE: docs/api/functions/createRouterAssets.md
================================================
# Functions: createRouterAssets()
## Call Signature
```ts
function createRouterAssets(router): RouterAssets;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TRouter` *extends* [`Router`](../types/Router.md) |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `router` | `TRouter` |
### Returns
[`RouterAssets`](../types/RouterAssets.md)\<`TRouter`\>
## Call Signature
```ts
function createRouterAssets(routerKey): RouterAssets;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TRouter` *extends* [`Router`](../types/Router.md) |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `routerKey` | `InjectionKey`\<`TRouter`\> |
### Returns
[`RouterAssets`](../types/RouterAssets.md)\<`TRouter`\>
================================================
FILE: docs/api/functions/createRouterPlugin.md
================================================
# Functions: createRouterPlugin()
```ts
function createRouterPlugin(plugin): RouterPlugin & PluginRouteHooks;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](../types/Routes.md) | [`Routes`](../types/Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `plugin` | [`CreateRouterPluginOptions`](../types/CreateRouterPluginOptions.md)\<`TRoutes`, `TRejections`\> |
## Returns
[`RouterPlugin`](../types/RouterPlugin.md)\<`TRoutes`, `TRejections`\> & [`PluginRouteHooks`](../types/PluginRouteHooks.md)\<`TRoutes`, `TRejections`\>
================================================
FILE: docs/api/functions/createUrl.md
================================================
# Functions: createUrl()
```ts
function createUrl(options): ToUrl;
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* [`CreateUrlOptions`](../types/CreateUrlOptions.md) |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `T` |
## Returns
[`ToUrl`](../types/ToUrl.md)\<`T`\>
================================================
FILE: docs/api/functions/isUrlWithSchema.md
================================================
# Functions: isUrlWithSchema()
```ts
function isUrlWithSchema(url): url is Url & { schema: Record };
```
**`Internal`**
Type guard to assert that a url has a schema.
## Parameters
| Parameter | Type |
| ------ | ------ |
| `url` | `unknown` |
## Returns
`url is Url & { schema: Record }`
================================================
FILE: docs/api/functions/isWithComponent.md
================================================
# Functions: isWithComponent()
```ts
function isWithComponent(options): options is T & { component: Component };
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* `Record`\<`string`, `unknown`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `T` |
## Returns
`options is T & { component: Component }`
================================================
FILE: docs/api/functions/isWithComponentProps.md
================================================
# Functions: isWithComponentProps()
```ts
function isWithComponentProps(options): options is T & { props: PropsGetter };
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* `Record`\<`string`, `unknown`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `T` |
## Returns
`options is T & { props: PropsGetter }`
================================================
FILE: docs/api/functions/isWithComponentPropsRecord.md
================================================
# Functions: isWithComponentPropsRecord()
```ts
function isWithComponentPropsRecord(options): options is T & { props: RoutePropsRecord };
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* `Record`\<`string`, `unknown`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `T` |
## Returns
`options is T & { props: RoutePropsRecord }`
================================================
FILE: docs/api/functions/isWithComponents.md
================================================
# Functions: isWithComponents()
```ts
function isWithComponents(options): options is T & { components: Record };
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* `Record`\<`string`, `unknown`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `T` |
## Returns
`options is T & { components: Record }`
================================================
FILE: docs/api/functions/isWithParent.md
================================================
# Functions: isWithParent()
```ts
function isWithParent(options): options is T & WithParent;
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* `Record`\<`string`, `unknown`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `options` | `T` |
## Returns
`options is T & WithParent`
================================================
FILE: docs/api/functions/literal.md
================================================
# Functions: literal()
```ts
function literal(value): ParamGetSet;
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* [`LiteralParam`](../types/LiteralParam.md) |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `value` | `T` |
## Returns
[`ParamGetSet`](../types/ParamGetSet.md)\<`T`\>
================================================
FILE: docs/api/functions/tupleOf.md
================================================
# Functions: tupleOf()
```ts
function tupleOf(params, options?): ParamGetSet>;
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* [`Param`](../types/Param.md)[] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `params` | `T` |
| `options?` | `TupleOfOptions` |
## Returns
[`ParamGetSet`](../types/ParamGetSet.md)\<`TupleOf`\<`T`\>\>
================================================
FILE: docs/api/functions/unionOf.md
================================================
# Functions: unionOf()
```ts
function unionOf(params): ParamGetSet>;
```
## Type Parameters
| Type Parameter |
| ------ |
| `T` *extends* [`Param`](../types/Param.md)[] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `params` | `T` |
## Returns
[`ParamGetSet`](../types/ParamGetSet.md)\<`ExtractParamType`\<`T`\[`number`\]\>\>
================================================
FILE: docs/api/functions/withDefault.md
================================================
# Functions: withDefault()
```ts
function withDefault(param, defaultValue): ParamWithDefault;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TParam` *extends* [`Param`](../types/Param.md) |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `param` | `TParam` |
| `defaultValue` | `ExtractParamType`\<`TParam`\> |
## Returns
`ParamWithDefault`\<`TParam`\>
================================================
FILE: docs/api/functions/withParams.md
================================================
# Functions: withParams()
## Call Signature
```ts
function withParams(value, params): UrlPart>;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TValue` *extends* `string` |
| `TParams` *extends* `MakeOptional`\<`WithParamsParamsInput`\<`TValue`\>\> |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `value` | `TValue` |
| `params` | `TParams` |
### Returns
`UrlPart`\<`WithParamsParamsOutput`\<`TValue`, `TParams`\>\>
## Call Signature
```ts
function withParams(): UrlPart<{
}>;
```
### Returns
`UrlPart`\<\{
\}\>
================================================
FILE: docs/api/hooks/onAfterRouteLeave.md
================================================
# Hooks: onAfterRouteLeave
```ts
const onAfterRouteLeave: RouterAssets["onAfterRouteLeave"];
```
Registers a hook that is called after a route has been left. Must be called during setup.
This can be used for cleanup actions after the component is no longer active, ensuring proper resource management.
## Param
The hook callback function
## Returns
A function that removes the added hook.
================================================
FILE: docs/api/hooks/onAfterRouteUpdate.md
================================================
# Hooks: onAfterRouteUpdate
```ts
const onAfterRouteUpdate: RouterAssets["onAfterRouteUpdate"];
```
Registers a hook that is called after a route has been updated. Must be called during setup.
This is ideal for responding to updates within the same route, such as parameter changes, without full component reloads.
## Param
The hook callback function
## Returns
A function that removes the added hook.
================================================
FILE: docs/api/hooks/onBeforeRouteLeave.md
================================================
# Hooks: onBeforeRouteLeave
```ts
const onBeforeRouteLeave: RouterAssets["onBeforeRouteLeave"];
```
Registers a hook that is called before a route is left. Must be called from setup.
This is useful for performing actions or cleanups before navigating away from a route component.
## Param
The hook callback function
## Returns
A function that removes the added hook.
================================================
FILE: docs/api/hooks/onBeforeRouteUpdate.md
================================================
# Hooks: onBeforeRouteUpdate
```ts
const onBeforeRouteUpdate: RouterAssets["onBeforeRouteUpdate"];
```
Registers a hook that is called before a route is updated. Must be called from setup.
This is particularly useful for handling changes in route parameters or query while staying within the same component.
## Param
The hook callback function
## Returns
A function that removes the added hook.
================================================
FILE: docs/api/index.md
================================================
# @kitbag/router
## Compositions
- [useLink](compositions/useLink.md)
- [useQueryValue](compositions/useQueryValue.md)
- [useRejection](compositions/useRejection.md)
- [useRoute](compositions/useRoute.md)
- [useRouter](compositions/useRouter.md)
## Errors
- [DuplicateParamsError](errors/DuplicateParamsError.md)
- [MetaPropertyConflict](errors/MetaPropertyConflict.md)
- [RouterNotInstalledError](errors/RouterNotInstalledError.md)
- [UseRouteInvalidError](errors/UseRouteInvalidError.md)
## Interfaces
- [Register](interfaces/Register.md)
## Type Guards
- [isRoute](type-guards/isRoute.md)
- [isUrlString](type-guards/isUrlString.md)
## Components
- [RouterLink](components/RouterLink.md)
- [RouterView](components/RouterView.md)
## Functions
- [arrayOf](functions/arrayOf.md)
- [asUrlString](functions/asUrlString.md)
- [combineRoutes](functions/combineRoutes.md)
- [createExternalRoute](functions/createExternalRoute.md)
- [createParam](functions/createParam.md)
- [createRejection](functions/createRejection.md)
- [createRoute](functions/createRoute.md)
- [createRouter](functions/createRouter.md)
- [createRouterAssets](functions/createRouterAssets.md)
- [createRouterPlugin](functions/createRouterPlugin.md)
- [createUrl](functions/createUrl.md)
- [isUrlWithSchema](functions/isUrlWithSchema.md)
- [isWithComponent](functions/isWithComponent.md)
- [isWithComponentProps](functions/isWithComponentProps.md)
- [isWithComponentPropsRecord](functions/isWithComponentPropsRecord.md)
- [isWithComponents](functions/isWithComponents.md)
- [isWithParent](functions/isWithParent.md)
- [literal](functions/literal.md)
- [tupleOf](functions/tupleOf.md)
- [unionOf](functions/unionOf.md)
- [withDefault](functions/withDefault.md)
- [withParams](functions/withParams.md)
## Hooks
- [onAfterRouteLeave](hooks/onAfterRouteLeave.md)
- [onAfterRouteUpdate](hooks/onAfterRouteUpdate.md)
- [onBeforeRouteLeave](hooks/onBeforeRouteLeave.md)
- [onBeforeRouteUpdate](hooks/onBeforeRouteUpdate.md)
## Types
- [AddAfterEnterHook](types/AddAfterEnterHook.md)
- [AddAfterLeaveHook](types/AddAfterLeaveHook.md)
- [AddAfterUpdateHook](types/AddAfterUpdateHook.md)
- [AddBeforeEnterHook](types/AddBeforeEnterHook.md)
- [AddBeforeLeaveHook](types/AddBeforeLeaveHook.md)
- [AddBeforeUpdateHook](types/AddBeforeUpdateHook.md)
- [AddComponentHook](types/AddComponentHook.md)
- [AddErrorHook](types/AddErrorHook.md)
- [AddGlobalHooks](types/AddGlobalHooks.md)
- [AddPluginErrorHook](types/AddPluginErrorHook.md)
- [AfterEnterHook](types/AfterEnterHook.md)
- [AfterEnterHookContext](types/AfterEnterHookContext.md)
- [AfterHookLifecycle](types/AfterHookLifecycle.md)
- [AfterHookResponse](types/AfterHookResponse.md)
- [AfterHookRunner](types/AfterHookRunner.md)
- [AfterLeaveHook](types/AfterLeaveHook.md)
- [AfterLeaveHookContext](types/AfterLeaveHookContext.md)
- [AfterUpdateHook](types/AfterUpdateHook.md)
- [AfterUpdateHookContext](types/AfterUpdateHookContext.md)
- [BeforeEnterHook](types/BeforeEnterHook.md)
- [BeforeEnterHookContext](types/BeforeEnterHookContext.md)
- [BeforeHookLifecycle](types/BeforeHookLifecycle.md)
- [BeforeHookResponse](types/BeforeHookResponse.md)
- [BeforeHookRunner](types/BeforeHookRunner.md)
- [BeforeLeaveHook](types/BeforeLeaveHook.md)
- [BeforeLeaveHookContext](types/BeforeLeaveHookContext.md)
- [BeforeUpdateHook](types/BeforeUpdateHook.md)
- [BeforeUpdateHookContext](types/BeforeUpdateHookContext.md)
- [ComponentHook](types/ComponentHook.md)
- [ComponentHookRegistration](types/ComponentHookRegistration.md)
- [CreatedRouteOptions](types/CreatedRouteOptions.md)
- [CreateRouteOptions](types/CreateRouteOptions.md)
- [CreateRouteProps](types/CreateRouteProps.md)
- [CreateRouterPluginOptions](types/CreateRouterPluginOptions.md)
- [CreateUrlOptions](types/CreateUrlOptions.md)
- [EmptyRouterPlugin](types/EmptyRouterPlugin.md)
- [ErrorHook](types/ErrorHook.md)
- [ErrorHookContext](types/ErrorHookContext.md)
- [ErrorHookRunner](types/ErrorHookRunner.md)
- [ErrorHookRunnerContext](types/ErrorHookRunnerContext.md)
- [ExternalRouteHooks](types/ExternalRouteHooks.md)
- [GenericRoute](types/GenericRoute.md)
- [HookLifecycle](types/HookLifecycle.md)
- [HookRemove](types/HookRemove.md)
- [HookTiming](types/HookTiming.md)
- [InternalRouteHooks](types/InternalRouteHooks.md)
- [LiteralParam](types/LiteralParam.md)
- [Param](types/Param.md)
- [ParamExtras](types/ParamExtras.md)
- [ParamGetSet](types/ParamGetSet.md)
- [ParamGetter](types/ParamGetter.md)
- [ParamSetter](types/ParamSetter.md)
- [ParseUrlOptions](types/ParseUrlOptions.md)
- [PluginAfterRouteHook](types/PluginAfterRouteHook.md)
- [PluginBeforeRouteHook](types/PluginBeforeRouteHook.md)
- [PluginErrorHook](types/PluginErrorHook.md)
- [PluginErrorHookContext](types/PluginErrorHookContext.md)
- [PluginRouteHooks](types/PluginRouteHooks.md)
- [PrefetchConfig](types/PrefetchConfig.md)
- [PrefetchConfigOptions](types/PrefetchConfigOptions.md)
- [PrefetchConfigs](types/PrefetchConfigs.md)
- [PrefetchStrategy](types/PrefetchStrategy.md)
- [PropsCallbackContext](types/PropsCallbackContext.md)
- [PropsCallbackParent](types/PropsCallbackParent.md)
- [PropsGetter](types/PropsGetter.md)
- [QuerySource](types/QuerySource.md)
- [RegisteredRouter](types/RegisteredRouter.md)
- [ResolvedRoute](types/ResolvedRoute.md)
- [ResolvedRouteUnion](types/ResolvedRouteUnion.md)
- [Route](types/Route.md)
- [RouteMeta](types/RouteMeta.md)
- [Router](types/Router.md)
- [RouterAssets](types/RouterAssets.md)
- [RouterLinkProps](types/RouterLinkProps.md)
- [RouterOptions](types/RouterOptions.md)
- [RouterPlugin](types/RouterPlugin.md)
- [RouterPush](types/RouterPush.md)
- [RouterPushOptions](types/RouterPushOptions.md)
- [RouterReject](types/RouterReject.md)
- [RouterRejections](types/RouterRejections.md)
- [RouterReplace](types/RouterReplace.md)
- [RouterReplaceOptions](types/RouterReplaceOptions.md)
- [RouterResolve](types/RouterResolve.md)
- [RouterResolvedRouteUnion](types/RouterResolvedRouteUnion.md)
- [RouterResolveOptions](types/RouterResolveOptions.md)
- [RouterRoute](types/RouterRoute.md)
- [RouterRouteName](types/RouterRouteName.md)
- [RouterRoutes](types/RouterRoutes.md)
- [RouterRouteUnion](types/RouterRouteUnion.md)
- [RouterViewPropsGetter](types/RouterViewPropsGetter.md)
- [Routes](types/Routes.md)
- [ToCallback](types/ToCallback.md)
- [ToRoute](types/ToRoute.md)
- [ToUrl](types/ToUrl.md)
- [Url](types/Url.md)
- [UrlParamsReading](types/UrlParamsReading.md)
- [UrlParamsWriting](types/UrlParamsWriting.md)
- [UrlString](types/UrlString.md)
- [UseLink](types/UseLink.md)
- [UseLinkOptions](types/UseLinkOptions.md)
- [WithHost](types/WithHost.md)
- [WithoutHost](types/WithoutHost.md)
- [WithoutParent](types/WithoutParent.md)
- [WithParent](types/WithParent.md)
## Variables
- [IS\_URL\_SYMBOL](variables/IS_URL_SYMBOL.md)
================================================
FILE: docs/api/interfaces/Register.md
================================================
# Interfaces: Register
Represents the state of currently registered router, and route meta. Used to provide correct type context for
components like `RouterLink`, as well as for composables like `useRouter`, `useRoute`, and hooks.
## Example
```ts
declare module '@kitbag/router' {
interface Register {
router: typeof router
routeMeta: { public?: boolean }
}
}
```
================================================
FILE: docs/api/type-guards/isRoute.md
================================================
# Type Guards: isRoute
```ts
const isRoute: RouterAssets["isRoute"];
```
A guard to verify if a route or unknown value matches a given route name.
## Param
The name of the route to check against the current route.
## Returns
True if the current route matches the given route name, false otherwise.
================================================
FILE: docs/api/type-guards/isUrlString.md
================================================
# Type Guards: isUrlString()
```ts
function isUrlString(value): value is UrlString;
```
A type guard for determining if a value is a valid URL.
## Parameters
| Parameter | Type | Description |
| ------ | ------ | ------ |
| `value` | `unknown` | The value to check. |
## Returns
`value is UrlString`
`true` if the value is a valid URL, otherwise `false`.
================================================
FILE: docs/api/typedoc-sidebar.json
================================================
[
{
"text": "Compositions",
"collapsed": true,
"items": [
{
"text": "useLink",
"link": "/api/compositions/useLink.md"
},
{
"text": "useQueryValue",
"link": "/api/compositions/useQueryValue.md"
},
{
"text": "useRejection",
"link": "/api/compositions/useRejection.md"
},
{
"text": "useRoute",
"link": "/api/compositions/useRoute.md"
},
{
"text": "useRouter",
"link": "/api/compositions/useRouter.md"
}
]
},
{
"text": "Errors",
"collapsed": true,
"items": [
{
"text": "DuplicateParamsError",
"link": "/api/errors/DuplicateParamsError.md"
},
{
"text": "MetaPropertyConflict",
"link": "/api/errors/MetaPropertyConflict.md"
},
{
"text": "RouterNotInstalledError",
"link": "/api/errors/RouterNotInstalledError.md"
},
{
"text": "UseRouteInvalidError",
"link": "/api/errors/UseRouteInvalidError.md"
}
]
},
{
"text": "Interfaces",
"collapsed": true,
"items": [
{
"text": "Register",
"link": "/api/interfaces/Register.md"
}
]
},
{
"text": "Type Guards",
"collapsed": true,
"items": [
{
"text": "isRoute",
"link": "/api/type-guards/isRoute.md"
},
{
"text": "isUrlString",
"link": "/api/type-guards/isUrlString.md"
}
]
},
{
"text": "Components",
"collapsed": true,
"items": [
{
"text": "RouterLink",
"link": "/api/components/RouterLink.md"
},
{
"text": "RouterView",
"link": "/api/components/RouterView.md"
}
]
},
{
"text": "Functions",
"collapsed": true,
"items": [
{
"text": "arrayOf",
"link": "/api/functions/arrayOf.md"
},
{
"text": "asUrlString",
"link": "/api/functions/asUrlString.md"
},
{
"text": "combineRoutes",
"link": "/api/functions/combineRoutes.md"
},
{
"text": "createExternalRoute",
"link": "/api/functions/createExternalRoute.md"
},
{
"text": "createParam",
"link": "/api/functions/createParam.md"
},
{
"text": "createRejection",
"link": "/api/functions/createRejection.md"
},
{
"text": "createRoute",
"link": "/api/functions/createRoute.md"
},
{
"text": "createRouter",
"link": "/api/functions/createRouter.md"
},
{
"text": "createRouterAssets",
"link": "/api/functions/createRouterAssets.md"
},
{
"text": "createRouterPlugin",
"link": "/api/functions/createRouterPlugin.md"
},
{
"text": "createUrl",
"link": "/api/functions/createUrl.md"
},
{
"text": "isUrlWithSchema",
"link": "/api/functions/isUrlWithSchema.md"
},
{
"text": "isWithComponent",
"link": "/api/functions/isWithComponent.md"
},
{
"text": "isWithComponentProps",
"link": "/api/functions/isWithComponentProps.md"
},
{
"text": "isWithComponentPropsRecord",
"link": "/api/functions/isWithComponentPropsRecord.md"
},
{
"text": "isWithComponents",
"link": "/api/functions/isWithComponents.md"
},
{
"text": "isWithParent",
"link": "/api/functions/isWithParent.md"
},
{
"text": "literal",
"link": "/api/functions/literal.md"
},
{
"text": "tupleOf",
"link": "/api/functions/tupleOf.md"
},
{
"text": "unionOf",
"link": "/api/functions/unionOf.md"
},
{
"text": "withDefault",
"link": "/api/functions/withDefault.md"
},
{
"text": "withParams",
"link": "/api/functions/withParams.md"
}
]
},
{
"text": "Hooks",
"collapsed": true,
"items": [
{
"text": "onAfterRouteLeave",
"link": "/api/hooks/onAfterRouteLeave.md"
},
{
"text": "onAfterRouteUpdate",
"link": "/api/hooks/onAfterRouteUpdate.md"
},
{
"text": "onBeforeRouteLeave",
"link": "/api/hooks/onBeforeRouteLeave.md"
},
{
"text": "onBeforeRouteUpdate",
"link": "/api/hooks/onBeforeRouteUpdate.md"
}
]
},
{
"text": "Types",
"collapsed": true,
"items": [
{
"text": "AddAfterEnterHook",
"link": "/api/types/AddAfterEnterHook.md"
},
{
"text": "AddAfterLeaveHook",
"link": "/api/types/AddAfterLeaveHook.md"
},
{
"text": "AddAfterUpdateHook",
"link": "/api/types/AddAfterUpdateHook.md"
},
{
"text": "AddBeforeEnterHook",
"link": "/api/types/AddBeforeEnterHook.md"
},
{
"text": "AddBeforeLeaveHook",
"link": "/api/types/AddBeforeLeaveHook.md"
},
{
"text": "AddBeforeUpdateHook",
"link": "/api/types/AddBeforeUpdateHook.md"
},
{
"text": "AddComponentHook",
"link": "/api/types/AddComponentHook.md"
},
{
"text": "AddErrorHook",
"link": "/api/types/AddErrorHook.md"
},
{
"text": "AddGlobalHooks",
"link": "/api/types/AddGlobalHooks.md"
},
{
"text": "AddPluginErrorHook",
"link": "/api/types/AddPluginErrorHook.md"
},
{
"text": "AfterEnterHook",
"link": "/api/types/AfterEnterHook.md"
},
{
"text": "AfterEnterHookContext",
"link": "/api/types/AfterEnterHookContext.md"
},
{
"text": "AfterHookLifecycle",
"link": "/api/types/AfterHookLifecycle.md"
},
{
"text": "AfterHookResponse",
"link": "/api/types/AfterHookResponse.md"
},
{
"text": "AfterHookRunner",
"link": "/api/types/AfterHookRunner.md"
},
{
"text": "AfterLeaveHook",
"link": "/api/types/AfterLeaveHook.md"
},
{
"text": "AfterLeaveHookContext",
"link": "/api/types/AfterLeaveHookContext.md"
},
{
"text": "AfterUpdateHook",
"link": "/api/types/AfterUpdateHook.md"
},
{
"text": "AfterUpdateHookContext",
"link": "/api/types/AfterUpdateHookContext.md"
},
{
"text": "BeforeEnterHook",
"link": "/api/types/BeforeEnterHook.md"
},
{
"text": "BeforeEnterHookContext",
"link": "/api/types/BeforeEnterHookContext.md"
},
{
"text": "BeforeHookLifecycle",
"link": "/api/types/BeforeHookLifecycle.md"
},
{
"text": "BeforeHookResponse",
"link": "/api/types/BeforeHookResponse.md"
},
{
"text": "BeforeHookRunner",
"link": "/api/types/BeforeHookRunner.md"
},
{
"text": "BeforeLeaveHook",
"link": "/api/types/BeforeLeaveHook.md"
},
{
"text": "BeforeLeaveHookContext",
"link": "/api/types/BeforeLeaveHookContext.md"
},
{
"text": "BeforeUpdateHook",
"link": "/api/types/BeforeUpdateHook.md"
},
{
"text": "BeforeUpdateHookContext",
"link": "/api/types/BeforeUpdateHookContext.md"
},
{
"text": "ComponentHook",
"link": "/api/types/ComponentHook.md"
},
{
"text": "ComponentHookRegistration",
"link": "/api/types/ComponentHookRegistration.md"
},
{
"text": "CreatedRouteOptions",
"link": "/api/types/CreatedRouteOptions.md"
},
{
"text": "CreateRouteOptions",
"link": "/api/types/CreateRouteOptions.md"
},
{
"text": "CreateRouteProps",
"link": "/api/types/CreateRouteProps.md"
},
{
"text": "CreateRouterPluginOptions",
"link": "/api/types/CreateRouterPluginOptions.md"
},
{
"text": "CreateUrlOptions",
"link": "/api/types/CreateUrlOptions.md"
},
{
"text": "EmptyRouterPlugin",
"link": "/api/types/EmptyRouterPlugin.md"
},
{
"text": "ErrorHook",
"link": "/api/types/ErrorHook.md"
},
{
"text": "ErrorHookContext",
"link": "/api/types/ErrorHookContext.md"
},
{
"text": "ErrorHookRunner",
"link": "/api/types/ErrorHookRunner.md"
},
{
"text": "ErrorHookRunnerContext",
"link": "/api/types/ErrorHookRunnerContext.md"
},
{
"text": "ExternalRouteHooks",
"link": "/api/types/ExternalRouteHooks.md"
},
{
"text": "GenericRoute",
"link": "/api/types/GenericRoute.md"
},
{
"text": "HookLifecycle",
"link": "/api/types/HookLifecycle.md"
},
{
"text": "HookRemove",
"link": "/api/types/HookRemove.md"
},
{
"text": "HookTiming",
"link": "/api/types/HookTiming.md"
},
{
"text": "InternalRouteHooks",
"link": "/api/types/InternalRouteHooks.md"
},
{
"text": "LiteralParam",
"link": "/api/types/LiteralParam.md"
},
{
"text": "Param",
"link": "/api/types/Param.md"
},
{
"text": "ParamExtras",
"link": "/api/types/ParamExtras.md"
},
{
"text": "ParamGetSet",
"link": "/api/types/ParamGetSet.md"
},
{
"text": "ParamGetter",
"link": "/api/types/ParamGetter.md"
},
{
"text": "ParamSetter",
"link": "/api/types/ParamSetter.md"
},
{
"text": "ParseUrlOptions",
"link": "/api/types/ParseUrlOptions.md"
},
{
"text": "PluginAfterRouteHook",
"link": "/api/types/PluginAfterRouteHook.md"
},
{
"text": "PluginBeforeRouteHook",
"link": "/api/types/PluginBeforeRouteHook.md"
},
{
"text": "PluginErrorHook",
"link": "/api/types/PluginErrorHook.md"
},
{
"text": "PluginErrorHookContext",
"link": "/api/types/PluginErrorHookContext.md"
},
{
"text": "PluginRouteHooks",
"link": "/api/types/PluginRouteHooks.md"
},
{
"text": "PrefetchConfig",
"link": "/api/types/PrefetchConfig.md"
},
{
"text": "PrefetchConfigOptions",
"link": "/api/types/PrefetchConfigOptions.md"
},
{
"text": "PrefetchConfigs",
"link": "/api/types/PrefetchConfigs.md"
},
{
"text": "PrefetchStrategy",
"link": "/api/types/PrefetchStrategy.md"
},
{
"text": "PropsCallbackContext",
"link": "/api/types/PropsCallbackContext.md"
},
{
"text": "PropsCallbackParent",
"link": "/api/types/PropsCallbackParent.md"
},
{
"text": "PropsGetter",
"link": "/api/types/PropsGetter.md"
},
{
"text": "QuerySource",
"link": "/api/types/QuerySource.md"
},
{
"text": "RegisteredRouter",
"link": "/api/types/RegisteredRouter.md"
},
{
"text": "ResolvedRoute",
"link": "/api/types/ResolvedRoute.md"
},
{
"text": "ResolvedRouteUnion",
"link": "/api/types/ResolvedRouteUnion.md"
},
{
"text": "Route",
"link": "/api/types/Route.md"
},
{
"text": "RouteMeta",
"link": "/api/types/RouteMeta.md"
},
{
"text": "Router",
"link": "/api/types/Router.md"
},
{
"text": "RouterAssets",
"link": "/api/types/RouterAssets.md"
},
{
"text": "RouterLinkProps",
"link": "/api/types/RouterLinkProps.md"
},
{
"text": "RouterOptions",
"link": "/api/types/RouterOptions.md"
},
{
"text": "RouterPlugin",
"link": "/api/types/RouterPlugin.md"
},
{
"text": "RouterPush",
"link": "/api/types/RouterPush.md"
},
{
"text": "RouterPushOptions",
"link": "/api/types/RouterPushOptions.md"
},
{
"text": "RouterReject",
"link": "/api/types/RouterReject.md"
},
{
"text": "RouterRejections",
"link": "/api/types/RouterRejections.md"
},
{
"text": "RouterReplace",
"link": "/api/types/RouterReplace.md"
},
{
"text": "RouterReplaceOptions",
"link": "/api/types/RouterReplaceOptions.md"
},
{
"text": "RouterResolve",
"link": "/api/types/RouterResolve.md"
},
{
"text": "RouterResolvedRouteUnion",
"link": "/api/types/RouterResolvedRouteUnion.md"
},
{
"text": "RouterResolveOptions",
"link": "/api/types/RouterResolveOptions.md"
},
{
"text": "RouterRoute",
"link": "/api/types/RouterRoute.md"
},
{
"text": "RouterRouteName",
"link": "/api/types/RouterRouteName.md"
},
{
"text": "RouterRoutes",
"link": "/api/types/RouterRoutes.md"
},
{
"text": "RouterRouteUnion",
"link": "/api/types/RouterRouteUnion.md"
},
{
"text": "RouterViewPropsGetter",
"link": "/api/types/RouterViewPropsGetter.md"
},
{
"text": "Routes",
"link": "/api/types/Routes.md"
},
{
"text": "ToCallback",
"link": "/api/types/ToCallback.md"
},
{
"text": "ToRoute",
"link": "/api/types/ToRoute.md"
},
{
"text": "ToUrl",
"link": "/api/types/ToUrl.md"
},
{
"text": "Url",
"link": "/api/types/Url.md"
},
{
"text": "UrlParamsReading",
"link": "/api/types/UrlParamsReading.md"
},
{
"text": "UrlParamsWriting",
"link": "/api/types/UrlParamsWriting.md"
},
{
"text": "UrlString",
"link": "/api/types/UrlString.md"
},
{
"text": "UseLink",
"link": "/api/types/UseLink.md"
},
{
"text": "UseLinkOptions",
"link": "/api/types/UseLinkOptions.md"
},
{
"text": "WithHost",
"link": "/api/types/WithHost.md"
},
{
"text": "WithoutHost",
"link": "/api/types/WithoutHost.md"
},
{
"text": "WithoutParent",
"link": "/api/types/WithoutParent.md"
},
{
"text": "WithParent",
"link": "/api/types/WithParent.md"
}
]
},
{
"text": "Variables",
"collapsed": true,
"items": [
{
"text": "IS_URL_SYMBOL",
"link": "/api/variables/IS_URL_SYMBOL.md"
}
]
}
]
================================================
FILE: docs/api/types/AddAfterEnterHook.md
================================================
# Types: AddAfterEnterHook()\
```ts
type AddAfterEnterHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`AfterEnterHook`](AfterEnterHook.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddAfterLeaveHook.md
================================================
# Types: AddAfterLeaveHook()\
```ts
type AddAfterLeaveHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`AfterLeaveHook`](AfterLeaveHook.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddAfterUpdateHook.md
================================================
# Types: AddAfterUpdateHook()\
```ts
type AddAfterUpdateHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`AfterUpdateHook`](AfterUpdateHook.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddBeforeEnterHook.md
================================================
# Types: AddBeforeEnterHook()\
```ts
type AddBeforeEnterHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`BeforeEnterHook`](BeforeEnterHook.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddBeforeLeaveHook.md
================================================
# Types: AddBeforeLeaveHook()\
```ts
type AddBeforeLeaveHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`BeforeLeaveHook`](BeforeLeaveHook.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddBeforeUpdateHook.md
================================================
# Types: AddBeforeUpdateHook()\
```ts
type AddBeforeUpdateHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`BeforeUpdateHook`](BeforeUpdateHook.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddComponentHook.md
================================================
# Types: AddComponentHook()
```ts
type AddComponentHook = (registration) => HookRemove;
```
Function to add a component route hook with depth-based condition checking.
## Parameters
| Parameter | Type |
| ------ | ------ |
| `registration` | [`ComponentHookRegistration`](ComponentHookRegistration.md) |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddErrorHook.md
================================================
# Types: AddErrorHook()\
```ts
type AddErrorHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`ErrorHook`](ErrorHook.md)\<`TRoute`, `TRoutes`, `TRejections`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AddGlobalHooks.md
================================================
# Types: AddGlobalHooks()
```ts
type AddGlobalHooks = (hooks) => void;
```
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hooks` | `Hooks` |
## Returns
`void`
================================================
FILE: docs/api/types/AddPluginErrorHook.md
================================================
# Types: AddPluginErrorHook()\
```ts
type AddPluginErrorHook = (hook) => HookRemove;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `hook` | [`PluginErrorHook`](PluginErrorHook.md)\<`TRoutes`, `TRejections`\> |
## Returns
[`HookRemove`](HookRemove.md)
================================================
FILE: docs/api/types/AfterEnterHook.md
================================================
# Types: AfterEnterHook()\
```ts
type AfterEnterHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRouteUnion`](ResolvedRouteUnion.md)\<`TRouteTo`\> |
| `context` | [`AfterEnterHookContext`](AfterEnterHookContext.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/AfterEnterHookContext.md
================================================
# Types: AfterEnterHookContext\
```ts
type AfterEnterHookContext = AfterHookContext & object;
```
## Type Declaration
### from
```ts
from: ResolvedRouteUnion | null;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
================================================
FILE: docs/api/types/AfterHookLifecycle.md
================================================
# Types: AfterHookLifecycle
```ts
type AfterHookLifecycle = "onAfterRouteEnter" | "onAfterRouteUpdate" | "onAfterRouteLeave";
```
Enumerates the lifecycle events for after route hooks.
================================================
FILE: docs/api/types/AfterHookResponse.md
================================================
# Types: AfterHookResponse
```ts
type AfterHookResponse = CallbackContextSuccess | CallbackContextPush | CallbackContextReject;
```
================================================
FILE: docs/api/types/AfterHookRunner.md
================================================
# Types: AfterHookRunner()
```ts
type AfterHookRunner = (context) => Promise;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `context` | \{ `from`: \| [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> \| `null`; `to`: [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\>; \} |
| `context.from` | \| [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> \| `null` |
| `context.to` | [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> |
## Returns
`Promise`\<[`AfterHookResponse`](AfterHookResponse.md)\>
================================================
FILE: docs/api/types/AfterLeaveHook.md
================================================
# Types: AfterLeaveHook()\
```ts
type AfterLeaveHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRouteUnion`](ResolvedRouteUnion.md)\<`TRouteTo`\> |
| `context` | [`AfterLeaveHookContext`](AfterLeaveHookContext.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/AfterLeaveHookContext.md
================================================
# Types: AfterLeaveHookContext\
```ts
type AfterLeaveHookContext = AfterHookContext & object;
```
## Type Declaration
### from
```ts
from: ResolvedRouteUnion;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
================================================
FILE: docs/api/types/AfterUpdateHook.md
================================================
# Types: AfterUpdateHook()\
```ts
type AfterUpdateHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRouteUnion`](ResolvedRouteUnion.md)\<`TRouteTo`\> |
| `context` | [`AfterUpdateHookContext`](AfterUpdateHookContext.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/AfterUpdateHookContext.md
================================================
# Types: AfterUpdateHookContext\
```ts
type AfterUpdateHookContext = AfterHookContext & object;
```
## Type Declaration
### from
```ts
from: ResolvedRouteUnion | null;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
================================================
FILE: docs/api/types/BeforeEnterHook.md
================================================
# Types: BeforeEnterHook()\
```ts
type BeforeEnterHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRouteUnion`](ResolvedRouteUnion.md)\<`TRouteTo`\> |
| `context` | [`BeforeEnterHookContext`](BeforeEnterHookContext.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/BeforeEnterHookContext.md
================================================
# Types: BeforeEnterHookContext\
```ts
type BeforeEnterHookContext = BeforeHookContext & object;
```
## Type Declaration
### from
```ts
from: ResolvedRouteUnion | null;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
================================================
FILE: docs/api/types/BeforeHookLifecycle.md
================================================
# Types: BeforeHookLifecycle
```ts
type BeforeHookLifecycle = "onBeforeRouteEnter" | "onBeforeRouteUpdate" | "onBeforeRouteLeave";
```
Enumerates the lifecycle events for before route hooks.
================================================
FILE: docs/api/types/BeforeHookResponse.md
================================================
# Types: BeforeHookResponse
```ts
type BeforeHookResponse =
| CallbackContextSuccess
| CallbackContextPush
| CallbackContextReject
| CallbackContextAbort;
```
================================================
FILE: docs/api/types/BeforeHookRunner.md
================================================
# Types: BeforeHookRunner()
```ts
type BeforeHookRunner = (context) => Promise;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `context` | \{ `from`: \| [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> \| `null`; `to`: [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\>; \} |
| `context.from` | \| [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> \| `null` |
| `context.to` | [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> |
## Returns
`Promise`\<[`BeforeHookResponse`](BeforeHookResponse.md)\>
================================================
FILE: docs/api/types/BeforeLeaveHook.md
================================================
# Types: BeforeLeaveHook()\
```ts
type BeforeLeaveHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRouteUnion`](ResolvedRouteUnion.md)\<`TRouteTo`\> |
| `context` | [`BeforeLeaveHookContext`](BeforeLeaveHookContext.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/BeforeLeaveHookContext.md
================================================
# Types: BeforeLeaveHookContext\
```ts
type BeforeLeaveHookContext = BeforeHookContext & object;
```
## Type Declaration
### from
```ts
from: ResolvedRouteUnion;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
================================================
FILE: docs/api/types/BeforeUpdateHook.md
================================================
# Types: BeforeUpdateHook()\
```ts
type BeforeUpdateHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRouteUnion`](ResolvedRouteUnion.md)\<`TRouteTo`\> |
| `context` | [`BeforeUpdateHookContext`](BeforeUpdateHookContext.md)\<`TRoutes`, `TRejections`, `TRouteTo`, `TRouteFrom`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/BeforeUpdateHookContext.md
================================================
# Types: BeforeUpdateHookContext\
```ts
type BeforeUpdateHookContext = BeforeHookContext & object;
```
## Type Declaration
### from
```ts
from: ResolvedRouteUnion | null;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
| `TRouteTo` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
| `TRouteFrom` *extends* [`Route`](Route.md) | `TRoutes`\[`number`\] |
================================================
FILE: docs/api/types/ComponentHook.md
================================================
# Types: ComponentHook
```ts
type ComponentHook =
| BeforeEnterHook
| BeforeUpdateHook
| BeforeLeaveHook
| AfterEnterHook
| AfterUpdateHook
| AfterLeaveHook;
```
Union type for all component route hooks.
================================================
FILE: docs/api/types/ComponentHookRegistration.md
================================================
# Types: ComponentHookRegistration
```ts
type ComponentHookRegistration = object;
```
Registration object for adding a component route hook.
## Properties
| Property | Type |
| ------ | ------ |
| `depth` | `number` |
| `hook` | [`ComponentHook`](ComponentHook.md) |
| `lifecycle` | [`HookLifecycle`](HookLifecycle.md) |
================================================
FILE: docs/api/types/CreateRouteOptions.md
================================================
# Types: CreateRouteOptions\
```ts
type CreateRouteOptions = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TName` *extends* `string` \| `undefined` | `string` \| `undefined` |
| `TMeta` *extends* [`RouteMeta`](RouteMeta.md) | [`RouteMeta`](RouteMeta.md) |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `component?` | `Component` | An optional component to render when this route is matched. **Default** `RouterView` |
| `components?` | `Record`\<`string`, `Component`\> | An object of named components to render using named views |
| `context?` | `RouteContext`[] | Related routes and rejections for the route. The context is exposed to the hooks and props callback functions for this route. |
| `hash?` | `string` \| `UrlPart` | Hash part of URL. |
| `meta?` | `TMeta` | Represents additional metadata associated with a route, customizable via declaration merging. |
| `name?` | `TName` | Name for route, used to create route keys and in navigation. |
| `parent?` | [`Route`](Route.md) | An optional parent route to nest this route under. |
| `path?` | `string` \| `UrlPart` | Path part of URL. |
| `prefetch?` | [`PrefetchConfig`](PrefetchConfig.md) | Determines what assets are prefetched when router-link is rendered for this route. Overrides router level prefetch. |
| `query?` | `string` \| `UrlQueryPart` | Query (aka search) part of URL. |
| `state?` | `Record`\<`string`, [`Param`](Param.md)\> | Type params for additional data intended to be stored in history state, all keys will be optional unless a default is provided. |
================================================
FILE: docs/api/types/CreateRouteProps.md
================================================
# Types: CreateRouteProps\
```ts
type CreateRouteProps = TOptions["component"] extends Component ? PropsGetter : TOptions["components"] extends Record ? RoutePropsRecord : RouterViewPropsGetter;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TOptions` *extends* [`CreateRouteOptions`](CreateRouteOptions.md) | [`CreateRouteOptions`](CreateRouteOptions.md) |
================================================
FILE: docs/api/types/CreateRouterPluginOptions.md
================================================
# Types: CreateRouterPluginOptions\
```ts
type CreateRouterPluginOptions = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Properties
| Property | Type |
| ------ | ------ |
| `rejections?` | `TRejections` |
| `routes?` | `TRoutes` |
================================================
FILE: docs/api/types/CreateUrlOptions.md
================================================
# Types: CreateUrlOptions
```ts
type CreateUrlOptions = object;
```
## Properties
| Property | Type |
| ------ | ------ |
| `hash?` | `string` \| `UrlPart` |
| `host?` | `string` \| `UrlPart` |
| `path?` | `string` \| `UrlPart` |
| `query?` | `string` \| `UrlQueryPart` |
================================================
FILE: docs/api/types/CreatedRouteOptions.md
================================================
# Types: CreatedRouteOptions
```ts
type CreatedRouteOptions = Omit & object;
```
The Route properties originally provided to `createRoute`. The only change is normalizing meta to always default to an empty object.
## Type Declaration
### id
```ts
id: string;
```
### props?
```ts
optional props: unknown;
```
================================================
FILE: docs/api/types/EmptyRouterPlugin.md
================================================
# Types: EmptyRouterPlugin
```ts
type EmptyRouterPlugin = RouterPlugin<[], []>;
```
================================================
FILE: docs/api/types/ErrorHook.md
================================================
# Types: ErrorHook()\
```ts
type ErrorHook = (error, context) => void;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
| `context` | [`ErrorHookContext`](ErrorHookContext.md)\<`TRoute`, `TRoutes`, `TRejections`\> |
## Returns
`void`
================================================
FILE: docs/api/types/ErrorHookContext.md
================================================
# Types: ErrorHookContext\
```ts
type ErrorHookContext = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Properties
| Property | Type |
| ------ | ------ |
| `from` | \| [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> \| `null` |
| `push` | [`RouterPush`](RouterPush.md)\<`TRoutes`\> |
| `reject` | [`RouterReject`](RouterReject.md)\<`TRejections`\> |
| `replace` | [`RouterReplace`](RouterReplace.md)\<`TRoutes`\> |
| `source` | `"props"` \| `"hook"` \| `"component"` |
| `to` | [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> |
| `update` | `RouteUpdate`\<[`ResolvedRoute`](ResolvedRoute.md)\<`TRoute`\>\> |
================================================
FILE: docs/api/types/ErrorHookRunner.md
================================================
# Types: ErrorHookRunner()
```ts
type ErrorHookRunner = (error, context) => void;
```
## Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
| `context` | [`ErrorHookRunnerContext`](ErrorHookRunnerContext.md) |
## Returns
`void`
================================================
FILE: docs/api/types/ErrorHookRunnerContext.md
================================================
# Types: ErrorHookRunnerContext\
```ts
type ErrorHookRunnerContext = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
## Properties
| Property | Type |
| ------ | ------ |
| `from` | \| [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> \| `null` |
| `source` | `"props"` \| `"hook"` |
| `to` | [`RouterResolvedRouteUnion`](RouterResolvedRouteUnion.md)\<`TRoutes`\> |
================================================
FILE: docs/api/types/ExternalRouteHooks.md
================================================
# Types: ExternalRouteHooks\
```ts
type ExternalRouteHooks = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) |
| `TContext` *extends* `RouteContext`[] \| `undefined` | `undefined` |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `onBeforeRouteEnter` | [`AddBeforeEnterHook`](AddBeforeEnterHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, `TRoute`, [`Route`](Route.md)\> | Registers a route hook to be called before the route is entered. |
================================================
FILE: docs/api/types/GenericRoute.md
================================================
# Types: GenericRoute
```ts
type GenericRoute = Url & object;
```
## Type Declaration
### depth
```ts
depth: number;
```
### id
```ts
id: string;
```
### matched
```ts
matched: CreatedRouteOptions;
```
### matches
```ts
matches: CreatedRouteOptions[];
```
### meta
```ts
meta: RouteMeta;
```
### name
```ts
name: string;
```
### prefetch?
```ts
optional prefetch: PrefetchConfig;
```
### state
```ts
state: Record;
```
================================================
FILE: docs/api/types/HookLifecycle.md
================================================
# Types: HookLifecycle
```ts
type HookLifecycle =
| BeforeHookLifecycle
| AfterHookLifecycle;
```
Union type for all route hook lifecycle events.
================================================
FILE: docs/api/types/HookRemove.md
================================================
# Types: HookRemove()
```ts
type HookRemove = () => void;
```
A function to remove a previously added route hook.
## Returns
`void`
================================================
FILE: docs/api/types/HookTiming.md
================================================
# Types: HookTiming
```ts
type HookTiming = "global" | "component";
```
================================================
FILE: docs/api/types/InternalRouteHooks.md
================================================
# Types: InternalRouteHooks\
```ts
type InternalRouteHooks = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) |
| `TContext` *extends* `RouteContext`[] | \[\] |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `onAfterRouteEnter` | [`AddAfterEnterHook`](AddAfterEnterHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, `TRoute`, [`Route`](Route.md)\> | Registers a route hook to be called after the route is entered. |
| `onAfterRouteLeave` | [`AddAfterLeaveHook`](AddAfterLeaveHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, [`Route`](Route.md), `TRoute`\> | Registers a route hook to be called after the route is left. |
| `onAfterRouteUpdate` | [`AddAfterUpdateHook`](AddAfterUpdateHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, `TRoute`, [`Route`](Route.md)\> | Registers a route hook to be called after the route is updated. |
| `onBeforeRouteEnter` | [`AddBeforeEnterHook`](AddBeforeEnterHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, `TRoute`, [`Route`](Route.md)\> | Registers a route hook to be called before the route is entered. |
| `onBeforeRouteLeave` | [`AddBeforeLeaveHook`](AddBeforeLeaveHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, [`Route`](Route.md), `TRoute`\> | Registers a route hook to be called before the route is left. |
| `onBeforeRouteUpdate` | [`AddBeforeUpdateHook`](AddBeforeUpdateHook.md)\<\[`TRoute`\] \| `RouteContextToRoute`\<`TContext`\>, `RouteContextToRejection`\<`TContext`\>, `TRoute`, [`Route`](Route.md)\> | Registers a route hook to be called before the route is updated. |
================================================
FILE: docs/api/types/LiteralParam.md
================================================
# Types: LiteralParam
```ts
type LiteralParam = string | number | boolean;
```
================================================
FILE: docs/api/types/Param.md
================================================
# Types: Param
```ts
type Param =
| ParamGetter
| ParamGetSet
| RegExp
| BooleanConstructor
| NumberConstructor
| StringConstructor
| DateConstructor
| JSON
| ZodSchemaLike
| ValibotSchemaLike
| LiteralParam;
```
================================================
FILE: docs/api/types/ParamExtras.md
================================================
# Types: ParamExtras
```ts
type ParamExtras = object;
```
## Properties
| Property | Type |
| ------ | ------ |
| `invalid` | (`message?`) => `never` |
================================================
FILE: docs/api/types/ParamGetSet.md
================================================
# Types: ParamGetSet\
```ts
type ParamGetSet = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |
## Properties
| Property | Type |
| ------ | ------ |
| `defaultValue?` | `T` |
| `get` | [`ParamGetter`](ParamGetter.md)\<`T`\> |
| `set` | [`ParamSetter`](ParamSetter.md)\<`T`\> |
================================================
FILE: docs/api/types/ParamGetter.md
================================================
# Types: ParamGetter()\
```ts
type ParamGetter = (value, extras) => T;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `value` | `string` |
| `extras` | [`ParamExtras`](ParamExtras.md) |
## Returns
`T`
================================================
FILE: docs/api/types/ParamSetter.md
================================================
# Types: ParamSetter()\
```ts
type ParamSetter = (value, extras) => string;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `value` | `T` |
| `extras` | [`ParamExtras`](ParamExtras.md) |
## Returns
`string`
================================================
FILE: docs/api/types/ParseUrlOptions.md
================================================
# Types: ParseUrlOptions
```ts
type ParseUrlOptions = object;
```
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `removeTrailingSlashes?` | `boolean` | Whether to remove trailing slashes from the path. When true, trailing slashes will be removed from the path. **Default** `true` |
================================================
FILE: docs/api/types/PluginAfterRouteHook.md
================================================
# Types: PluginAfterRouteHook()\
```ts
type PluginAfterRouteHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRoute`](ResolvedRoute.md) |
| `context` | `PluginAfterRouteHookContext`\<`TRoutes`, `TRejections`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/PluginBeforeRouteHook.md
================================================
# Types: PluginBeforeRouteHook()\
```ts
type PluginBeforeRouteHook = (to, context) => MaybePromise;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `to` | [`ResolvedRoute`](ResolvedRoute.md) |
| `context` | `PluginBeforeRouteHookContext`\<`TRoutes`, `TRejections`\> |
## Returns
`MaybePromise`\<`void`\>
================================================
FILE: docs/api/types/PluginErrorHook.md
================================================
# Types: PluginErrorHook()\
```ts
type PluginErrorHook = (error, context) => void;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `error` | `unknown` |
| `context` | [`PluginErrorHookContext`](PluginErrorHookContext.md)\<`TRoutes`, `TRejections`\> |
## Returns
`void`
================================================
FILE: docs/api/types/PluginErrorHookContext.md
================================================
# Types: PluginErrorHookContext\
```ts
type PluginErrorHookContext = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Properties
| Property | Type |
| ------ | ------ |
| `from` | [`ResolvedRoute`](ResolvedRoute.md) \| `null` |
| `push` | [`RouterPush`](RouterPush.md)\<`TRoutes`\> |
| `reject` | [`RouterReject`](RouterReject.md)\<`TRejections`\> |
| `replace` | [`RouterReplace`](RouterReplace.md)\<`TRoutes`\> |
| `source` | `"props"` \| `"hook"` \| `"component"` |
| `to` | [`ResolvedRoute`](ResolvedRoute.md) |
================================================
FILE: docs/api/types/PluginRouteHooks.md
================================================
# Types: PluginRouteHooks\
```ts
type PluginRouteHooks = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `onAfterRouteEnter` | `AddPluginAfterRouteHook`\<`TRoutes`, `TRejections`\> | Registers a global hook to be called after a route is entered. |
| `onAfterRouteLeave` | `AddPluginAfterRouteHook`\<`TRoutes`, `TRejections`\> | Registers a global hook to be called after a route is left. |
| `onAfterRouteUpdate` | `AddPluginAfterRouteHook`\<`TRoutes`, `TRejections`\> | Registers a global hook to be called after a route is updated. |
| `onBeforeRouteEnter` | `AddPluginBeforeRouteHook`\<`TRoutes`, `TRejections`\> | Registers a global hook to be called before a route is entered. |
| `onBeforeRouteLeave` | `AddPluginBeforeRouteHook`\<`TRoutes`, `TRejections`\> | Registers a global hook to be called before a route is left. |
| `onBeforeRouteUpdate` | `AddPluginBeforeRouteHook`\<`TRoutes`, `TRejections`\> | Registers a global hook to be called before a route is updated. |
| `onError` | [`AddPluginErrorHook`](AddPluginErrorHook.md)\<`TRoutes`, `TRejections`\> | Registers a global hook to be called when an error occurs. |
================================================
FILE: docs/api/types/PrefetchConfig.md
================================================
# Types: PrefetchConfig
```ts
type PrefetchConfig =
| boolean
| PrefetchStrategy
| PrefetchConfigOptions;
```
Determines what assets are prefetched. A boolean enables or disables all prefetching.
================================================
FILE: docs/api/types/PrefetchConfigOptions.md
================================================
# Types: PrefetchConfigOptions
```ts
type PrefetchConfigOptions = object;
```
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `components?` | `boolean` \| [`PrefetchStrategy`](PrefetchStrategy.md) | When true any component that is wrapped in vue's defineAsyncComponent will be prefetched **Default** `'eager'` |
| `props?` | `boolean` \| [`PrefetchStrategy`](PrefetchStrategy.md) | When true any props for routes will be prefetched **Default** `false` |
================================================
FILE: docs/api/types/PrefetchConfigs.md
================================================
# Types: PrefetchConfigs
```ts
type PrefetchConfigs = object;
```
## Properties
| Property | Type |
| ------ | ------ |
| `linkPrefetch?` | [`PrefetchConfig`](PrefetchConfig.md) |
| `routePrefetch?` | [`PrefetchConfig`](PrefetchConfig.md) |
| `routerPrefetch?` | [`PrefetchConfig`](PrefetchConfig.md) |
================================================
FILE: docs/api/types/PrefetchStrategy.md
================================================
# Types: PrefetchStrategy
```ts
type PrefetchStrategy = "eager" | "lazy" | "intent";
```
Determines when assets are prefetched.
eager: Fetched immediately
lazy: Fetched when visible
================================================
FILE: docs/api/types/PropsCallbackContext.md
================================================
# Types: PropsCallbackContext\
```ts
type PropsCallbackContext = object;
```
Context provided to props callback functions
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) |
| `TOptions` *extends* [`CreateRouteOptions`](CreateRouteOptions.md) | [`CreateRouteOptions`](CreateRouteOptions.md) |
## Properties
| Property | Type |
| ------ | ------ |
| `parent` | [`PropsCallbackParent`](PropsCallbackParent.md)\<`TOptions`\[`"parent"`\]\> |
| `push` | [`RouterPush`](RouterPush.md)\<\[`TRoute`\] \| `ExtractRouteContextRoutes`\<`TOptions`\>\> |
| `reject` | [`RouterReject`](RouterReject.md)\<`ExtractRouteContextRejections`\<`TOptions`\>\> |
| `replace` | [`RouterReplace`](RouterReplace.md)\<\[`TRoute`\] \| `ExtractRouteContextRoutes`\<`TOptions`\>\> |
| `update` | `RouteUpdate`\<[`ResolvedRoute`](ResolvedRoute.md)\<`TRoute`\>\> |
================================================
FILE: docs/api/types/PropsCallbackParent.md
================================================
# Types: PropsCallbackParent\
```ts
type PropsCallbackParent = Route | undefined extends TParent ?
| undefined
| {
name: string;
props: unknown;
} : TParent extends Route ? object : undefined;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TParent` *extends* [`Route`](Route.md) \| `undefined` | [`Route`](Route.md) \| `undefined` |
================================================
FILE: docs/api/types/PropsGetter.md
================================================
# Types: PropsGetter()\
```ts
type PropsGetter = (route, context) => MaybePromise>;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TOptions` *extends* [`CreateRouteOptions`](CreateRouteOptions.md) | [`CreateRouteOptions`](CreateRouteOptions.md) |
| `TComponent` *extends* `Component` | `Component` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `route` | [`ResolvedRoute`](ResolvedRoute.md)\<[`ToRoute`](ToRoute.md)\<`TOptions`\>\> |
| `context` | [`PropsCallbackContext`](PropsCallbackContext.md)\<[`ToRoute`](ToRoute.md)\<`TOptions`\>, `TOptions`\> |
## Returns
`MaybePromise`\<`ComponentProps`\<`TComponent`\>\>
================================================
FILE: docs/api/types/QuerySource.md
================================================
# Types: QuerySource
```ts
type QuerySource = ConstructorParameters[0];
```
================================================
FILE: docs/api/types/RegisteredRouter.md
================================================
# Types: RegisteredRouter\
```ts
type RegisteredRouter = T extends object ? TRouter : Router;
```
Represents the Router property within [Register](../interfaces/Register.md)
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `T` | [`Register`](../interfaces/Register.md) |
================================================
FILE: docs/api/types/ResolvedRoute.md
================================================
# Types: ResolvedRoute\
```ts
type ResolvedRoute = Readonly<{
hash: string;
hooks: Hooks[];
href: UrlString;
id: TRoute["id"];
matched: TRoute["matched"];
matches: TRoute["matches"];
name: TRoute["name"];
params: UrlParamsReading;
query: URLSearchParams;
state: ExtractRouteStateParamsAsOptional;
}>;
```
Represents a route that the router has matched to current browser location.
## Type Parameters
| Type Parameter | Default type | Description |
| ------ | ------ | ------ |
| `TRoute` *extends* [`Route`](Route.md) | [`Route`](Route.md) | Underlying Route that has been resolved. |
================================================
FILE: docs/api/types/ResolvedRouteUnion.md
================================================
# Types: ResolvedRouteUnion\
```ts
type ResolvedRouteUnion = TRoute extends Route ? ResolvedRoute : never;
```
Converts a union of Route types to a union of ResolvedRoute types while preserving the discriminated union structure for narrowing.
This is useful when you have a Route union (like `TRoutes[number]`) and need it to narrow properly.
Uses a distributive conditional type to ensure unions are properly distributed.
## Type Parameters
| Type Parameter |
| ------ |
| `TRoute` *extends* [`Route`](Route.md) |
## Example
```ts
type RouteUnion = RouteA | RouteB
type ResolvedUnion = ResolvedRouteUnion // ResolvedRoute | ResolvedRoute
```
================================================
FILE: docs/api/types/Route.md
================================================
# Types: Route\
```ts
type Route = TUrl & object;
```
Represents the structure of a route within the application. Return value of `createRoute`
## Type Declaration
### context
```ts
context: TContext;
```
Related routes and rejections for the route. The context is exposed to the hooks and props callback functions for this route.
### depth
```ts
depth: number;
```
**`Internal`**
A value that represents how many parents a route has. Used for route matching
### hooks
```ts
hooks: Hooks[];
```
**`Internal`**
The stores for routes including ancestors.
Order of routes will be from greatest ancestor to narrowest matched.
### id
```ts
id: string;
```
Unique identifier for the route, generated by router.
### matched
```ts
matched: LastInArray;
```
The specific route properties that were matched in the current route.
### matches
```ts
matches: TMatches;
```
The specific route properties that were matched in the current route, including any ancestors.
Order of routes will be from greatest ancestor to narrowest matched.
### meta
```ts
meta: TMeta;
```
Represents additional metadata associated with a route, combined with any parents.
### name
```ts
name: TName;
```
Identifier for the route as defined by user. Name must be unique among named routes. Name is used for routing and for matching.
### prefetch?
```ts
optional prefetch: PrefetchConfig;
```
Determines what assets are prefetched when router-link is rendered for this route. Overrides router level prefetch.
### state
```ts
state: TState;
```
Represents the schema of the route state, combined with any parents.
## Type Parameters
| Type Parameter | Default type | Description |
| ------ | ------ | ------ |
| `TName` *extends* `string` | `string` | Represents the unique name identifying the route, typically a string. |
| `TUrl` *extends* [`Url`](Url.md) | [`Url`](Url.md) | - |
| `TMeta` *extends* [`RouteMeta`](RouteMeta.md) | [`RouteMeta`](RouteMeta.md) | - |
| `TState` *extends* `Record`\<`string`, [`Param`](Param.md)\> | `Record`\<`string`, [`Param`](Param.md)\> | - |
| `TMatches` *extends* [`CreatedRouteOptions`](CreatedRouteOptions.md)[] | [`CreatedRouteOptions`](CreatedRouteOptions.md)[] | - |
| `TContext` *extends* `RouteContext`[] | `RouteContext`[] | - |
## Template
The type or structure of the route's path.
## Template
The type or structure of the query parameters associated with the route.
================================================
FILE: docs/api/types/RouteMeta.md
================================================
# Types: RouteMeta\
```ts
type RouteMeta = T extends object ? RouteMeta : Record;
```
Represents additional metadata associated with a route, customizable via declaration merging.
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `T` | [`Register`](../interfaces/Register.md) |
================================================
FILE: docs/api/types/Router.md
================================================
# Types: Router\
```ts
type Router = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | `any` |
| `TOptions` *extends* [`RouterOptions`](RouterOptions.md) | `any` |
| `TPlugin` *extends* [`RouterPlugin`](RouterPlugin.md) | `any` |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `back` | () => `void` | Navigates to the previous entry in the browser's history stack. |
| `find` | (`url`, `options?`) => [`ResolvedRoute`](ResolvedRoute.md) \| `undefined` | Creates a ResolvedRoute record for a given URL. |
| `forward` | () => `void` | Navigates to the next entry in the browser's history stack. |
| `go` | (`delta`) => `void` | Moves the current history entry to a specific point in the history stack. |
| `install` | (`app`) => `void` | Installs the router into a Vue application instance. |
| `isExternal` | (`url`) => `boolean` | Given a URL, returns true if host does not match host stored on router instance |
| `onAfterRouteEnter` | [`AddAfterEnterHook`](AddAfterEnterHook.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called after a route is entered. |
| `onAfterRouteLeave` | [`AddAfterLeaveHook`](AddAfterLeaveHook.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called after a route is left. |
| `onAfterRouteUpdate` | [`AddAfterUpdateHook`](AddAfterUpdateHook.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called after a route is updated. |
| `onBeforeRouteEnter` | [`AddBeforeEnterHook`](AddBeforeEnterHook.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called before a route is entered. |
| `onBeforeRouteLeave` | [`AddBeforeLeaveHook`](AddBeforeLeaveHook.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called before a route is left. |
| `onBeforeRouteUpdate` | [`AddBeforeUpdateHook`](AddBeforeUpdateHook.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called before a route is updated. |
| `onError` | [`AddErrorHook`](AddErrorHook.md)\<`TRoutes`\[`number`\] \| `TPlugin`\[`"routes"`\]\[`number`\], `TRoutes` \| `TPlugin`\[`"routes"`\], `ExtractRejections`\<`TOptions`\> \| `ExtractRejections`\<`TPlugin`\>\> | Registers a hook to be called when an error occurs. If the hook returns true, the error is considered handled and the other hooks are not run. If all hooks return false the error is rethrown |
| `prefetch?` | [`PrefetchConfig`](PrefetchConfig.md) | Determines what assets are prefetched. |
| `push` | [`RouterPush`](RouterPush.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\]\> | Navigates to a specified path or route object in the history stack, adding a new entry. |
| `refresh` | () => `void` | Forces the router to re-evaluate the current route. |
| `reject` | [`RouterReject`](RouterReject.md)\<\[`...ExtractRejections`, `...ExtractRejections`\]\> | Handles route rejection based on a specified rejection type. |
| `replace` | [`RouterReplace`](RouterReplace.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\]\> | Replaces the current entry in the history stack with a new one. |
| `resolve` | [`RouterResolve`](RouterResolve.md)\<`TRoutes` \| `TPlugin`\[`"routes"`\]\> | Creates a ResolvedRoute record for a given route name and params. |
| `route` | \| [`RouterRouteUnion`](RouterRouteUnion.md)\<`TRoutes`\> \| [`RouterRouteUnion`](RouterRouteUnion.md)\<`TPlugin`\[`"routes"`\]\> | Manages the current route state. |
| `start` | () => `Promise`\<`void`\> | Initializes the router based on the initial route. Automatically called when the router is installed. Calling this more than once has no effect. |
| `started` | `Ref`\<`boolean`\> | Returns true if the router has been started. |
| `stop` | () => `void` | Stops the router and teardown any listeners. |
================================================
FILE: docs/api/types/RouterAssets.md
================================================
# Types: RouterAssets\
```ts
type RouterAssets = object;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRouter` *extends* [`Router`](Router.md) |
## Compositions
| Property | Type | Description |
| ------ | ------ | ------ |
| `useLink` | `ReturnType`\<*typeof* `createUseLink`\> | A composition to export much of the functionality that drives RouterLink component. Also exports some useful context about routes relationship to current URL and convenience methods for navigating. **Param** The name of the route or a valid URL. **Param** If providing route name, this argument will expect corresponding params. **Param** [RouterResolveOptions](RouterResolveOptions.md) Same options as router resolve. |
| `useQueryValue` | `ReturnType`\<*typeof* `createUseQueryValue`\> | A composition to access a specific query value from the current route. |
| `useRejection` | `ReturnType`\<*typeof* `createUseRejection`\> | A composition to access the rejection from the router. |
| `useRoute` | `ReturnType`\<*typeof* `createUseRoute`\> | A composition to access the current route or verify a specific route name within a Vue component. This function provides two overloads: 1. When called without arguments, it returns the current route from the router without types. 2. When called with a route name, it checks if the current active route includes the specified route name. The function also sets up a reactive watcher on the route object from the router to continually check the validity of the route name if provided, throwing an error if the validation fails at any point during the component's lifecycle. **Template** A string type that should match route name of `RouterRouteName`, ensuring the route name exists. **Param** Optional. The name of the route to validate against the current active routes. **Throws** Throws an error if the provided route name is not valid or does not match the current route. |
| `useRouter` | `ReturnType`\<*typeof* `createUseRouter`\> | A composition to access the installed router instance within a Vue component. **Throws** Throws an error if the router has not been installed, ensuring the component does not operate without routing functionality. |
## Components
| Property | Type | Description |
| ------ | ------ | ------ |
| `RouterLink` | `ReturnType`\<*typeof* `createRouterLink`\> | A component to render a link to a route or any url. **Param** The props to pass to the router link component. |
| `RouterView` | `ReturnType`\<*typeof* `createRouterView`\> | A component to render the current route's component. **Param** The props to pass to the router view component. |
## Guards
| Property | Type | Description |
| ------ | ------ | ------ |
| `isRoute` | `ReturnType`\<*typeof* `createIsRoute`\> | A guard to verify if a route or unknown value matches a given route name. **Param** The name of the route to check against the current route. |
## Hooks
| Property | Type | Description |
| ------ | ------ | ------ |
| `onAfterRouteLeave` | [`AddAfterLeaveHook`](AddAfterLeaveHook.md)\<[`RouterRoutes`](RouterRoutes.md)\<`TRouter`\>, [`RouterRejections`](RouterRejections.md)\<`TRouter`\>\> | Registers a hook that is called after a route has been left. Must be called during setup. This can be used for cleanup actions after the component is no longer active, ensuring proper resource management. **Param** The hook callback function |
| `onAfterRouteUpdate` | [`AddAfterUpdateHook`](AddAfterUpdateHook.md)\<[`RouterRoutes`](RouterRoutes.md)\<`TRouter`\>, [`RouterRejections`](RouterRejections.md)\<`TRouter`\>\> | Registers a hook that is called after a route has been updated. Must be called during setup. This is ideal for responding to updates within the same route, such as parameter changes, without full component reloads. **Param** The hook callback function |
| `onBeforeRouteLeave` | [`AddBeforeLeaveHook`](AddBeforeLeaveHook.md)\<[`RouterRoutes`](RouterRoutes.md)\<`TRouter`\>, [`RouterRejections`](RouterRejections.md)\<`TRouter`\>\> | Registers a hook that is called before a route is left. Must be called from setup. This is useful for performing actions or cleanups before navigating away from a route component. **Param** The hook callback function |
| `onBeforeRouteUpdate` | [`AddBeforeUpdateHook`](AddBeforeUpdateHook.md)\<[`RouterRoutes`](RouterRoutes.md)\<`TRouter`\>, [`RouterRejections`](RouterRejections.md)\<`TRouter`\>\> | Registers a hook that is called before a route is updated. Must be called from setup. This is particularly useful for handling changes in route parameters or query while staying within the same component. **Param** The hook callback function |
================================================
FILE: docs/api/types/RouterLinkProps.md
================================================
# Types: RouterLinkProps\
```ts
type RouterLinkProps = RouterPushOptions & object;
```
## Type Declaration
### prefetch?
```ts
optional prefetch: PrefetchConfig;
```
Determines what assets are prefetched when router-link is rendered for this route. Overrides route level prefetch.
### to
```ts
to:
| UrlString
| ResolvedRoute
| ToCallback;
```
The url string to navigate to or a callback that returns a url string
## Type Parameters
| Type Parameter |
| ------ |
| `TRouter` *extends* [`Router`](Router.md) |
================================================
FILE: docs/api/types/RouterOptions.md
================================================
# Types: RouterOptions
```ts
type RouterOptions = object;
```
Options to initialize a [Router](Router.md) instance.
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `base?` | `string` | Base path to be prepended to any URL. Can be used for Vue applications that run in nested folder for domain. For example having `base` of `/foo` would assume all routes should start with `your.domain.com/foo`. |
| `historyMode?` | `RouterHistoryMode` | Specifies the history mode for the router, such as "browser", "memory", or "hash". **Default** `"auto"` |
| `initialUrl?` | `string` | Initial URL for the router to use. Required if using Node environment. Defaults to window.location when using browser. **Default** `window.location.toString()` |
| `isGlobalRouter?` | `boolean` | When false, createRouterAssets must be used for component and hooks. Assets exported by the library will not work with the created router instance. **Default** `true` |
| `prefetch?` | [`PrefetchConfig`](PrefetchConfig.md) | Determines what assets are prefetched when router-link is rendered for a specific route |
| `rejections?` | `Rejections` | Components assigned to each type of rejection your router supports. |
| `removeTrailingSlashes?` | `boolean` | Removes trailing slashes from the URL before matching routes. The browser's url is updated to reflect using `router.replace`. **Default** `true` |
================================================
FILE: docs/api/types/RouterPlugin.md
================================================
# Types: RouterPlugin\
```ts
type RouterPlugin = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | [`Routes`](Routes.md) |
| `TRejections` *extends* `Rejections` | `Rejections` |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `hooks` | `Hooks` | **`Internal`** The hooks supplied by the plugin. |
| `rejections` | `TRejections` | **`Internal`** The rejections supplied by the plugin. * |
| `routes` | `TRoutes` | **`Internal`** The routes supplied by the plugin. |
================================================
FILE: docs/api/types/RouterPush.md
================================================
# Types: RouterPush()\
```ts
type RouterPush = {
(name, ...args): Promise;
(route, options?): Promise;
(url, options?): Promise;
};
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) | `any` |
## Call Signature
```ts
(name, ...args): Promise;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TSource` *extends* `string` |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `name` | `TSource` |
| ...`args` | `RouterPushArgs`\<`TRoutes`, `TSource`\> |
### Returns
`Promise`\<`void`\>
## Call Signature
```ts
(route, options?): Promise;
```
### Parameters
| Parameter | Type |
| ------ | ------ |
| `route` | [`ResolvedRoute`](ResolvedRoute.md) |
| `options?` | [`RouterPushOptions`](RouterPushOptions.md)\<`unknown`\> |
### Returns
`Promise`\<`void`\>
## Call Signature
```ts
(url, options?): Promise;
```
### Parameters
| Parameter | Type |
| ------ | ------ |
| `url` | [`UrlString`](UrlString.md) |
| `options?` | [`RouterPushOptions`](RouterPushOptions.md)\<`unknown`\> |
### Returns
`Promise`\<`void`\>
================================================
FILE: docs/api/types/RouterPushOptions.md
================================================
# Types: RouterPushOptions\
```ts
type RouterPushOptions = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TState` | `unknown` |
## Properties
| Property | Type | Description |
| ------ | ------ | ------ |
| `hash?` | `string` | The hash to append to the url. |
| `query?` | [`QuerySource`](QuerySource.md) | The query string to add to the url. |
| `replace?` | `boolean` | Whether to replace the current history entry. |
| `state?` | `Partial`\<`TState`\> | State values to pass to the route. |
================================================
FILE: docs/api/types/RouterReject.md
================================================
# Types: RouterReject()\
```ts
type RouterReject = (type) => void;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRejections` *extends* `Rejections` \| `undefined` |
## Type Parameters
| Type Parameter |
| ------ |
| `TSource` *extends* `RejectionType`\<`TRejections`\> \| `BuiltInRejectionType` |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `type` | `TSource` |
## Returns
`void`
================================================
FILE: docs/api/types/RouterRejections.md
================================================
# Types: RouterRejections\
```ts
type RouterRejections = TRouter extends Router ? ExtractRejections | ExtractRejections : [];
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRouter` *extends* [`Router`](Router.md) |
================================================
FILE: docs/api/types/RouterReplace.md
================================================
# Types: RouterReplace()\
```ts
type RouterReplace = {
(name, ...args): Promise;
(route, options?): Promise;
(url, options?): Promise;
};
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) |
## Call Signature
```ts
(name, ...args): Promise;
```
### Type Parameters
| Type Parameter |
| ------ |
| `TSource` *extends* `string` |
### Parameters
| Parameter | Type |
| ------ | ------ |
| `name` | `TSource` |
| ...`args` | `RouterReplaceArgs`\<`TRoutes`, `TSource`\> |
### Returns
`Promise`\<`void`\>
## Call Signature
```ts
(route, options?): Promise;
```
### Parameters
| Parameter | Type |
| ------ | ------ |
| `route` | [`ResolvedRoute`](ResolvedRoute.md) |
| `options?` | [`RouterReplaceOptions`](RouterReplaceOptions.md)\<`unknown`\> |
### Returns
`Promise`\<`void`\>
## Call Signature
```ts
(url, options?): Promise;
```
### Parameters
| Parameter | Type |
| ------ | ------ |
| `url` | [`UrlString`](UrlString.md) |
| `options?` | [`RouterReplaceOptions`](RouterReplaceOptions.md)\<`unknown`\> |
### Returns
`Promise`\<`void`\>
================================================
FILE: docs/api/types/RouterReplaceOptions.md
================================================
# Types: RouterReplaceOptions\
```ts
type RouterReplaceOptions = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TState` | `unknown` |
## Properties
| Property | Type |
| ------ | ------ |
| `hash?` | `string` |
| `query?` | [`QuerySource`](QuerySource.md) |
| `state?` | `Partial`\<`TState`\> |
================================================
FILE: docs/api/types/RouterResolve.md
================================================
# Types: RouterResolve()\
```ts
type RouterResolve = (name, ...args) => ResolvedRoute;
```
## Type Parameters
| Type Parameter |
| ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) |
## Type Parameters
| Type Parameter |
| ------ |
| `TSource` *extends* `RoutesName`\<`TRoutes`\> |
## Parameters
| Parameter | Type |
| ------ | ------ |
| `name` | `TSource` |
| ...`args` | `RouterResolveArgs`\<`TRoutes`, `TSource`\> |
## Returns
[`ResolvedRoute`](ResolvedRoute.md)
================================================
FILE: docs/api/types/RouterResolveOptions.md
================================================
# Types: RouterResolveOptions\
```ts
type RouterResolveOptions = object;
```
## Type Parameters
| Type Parameter | Default type |
| ------ | ------ |
| `TState` | `unknown` |
## Properties
| Property | Type |
| ------ | ------ |
| `hash?` | `string` |
| `query?` | [`QuerySource`](QuerySource.md) |
| `state?` | `Partial`\<`TState`\> |
================================================
FILE: docs/api/types/RouterResolvedRouteUnion.md
================================================
# Types: RouterResolvedRouteUnion\
```ts
type RouterResolvedRouteUnion = { [K in keyof TRoutes]: ResolvedRoute }[number];
```
This type is the same as `ResolvedRoute` while remaining distributive
## Type Parameters
| Type Parameter |
| ------ |
| `TRoutes` *extends* [`Routes`](Routes.md) |
================================================
FILE: docs/api/types/RouterRoute.md
================================================
# Types: RouterRoute\
```ts
type RouterRoute
## Getting Started
Get Started with our [documentation](https://kitbag-router.netlify.app/).
## Installation
Install Kitbag Router with your favorite package manager
```bash
# bun
bun add @kitbag/router
# yarn
yarn add @kitbag/router
# npm
npm install @kitbag/router
```
## Define Routes
Routes are created individually using the [`createRoute`](https://kitbag-router.netlify.app/api/functions/createRoute) utility. Learn more about [defining routes](https://kitbag-router.netlify.app/core-concepts/routes).
```ts
import { createRoute } from '@kitbag/router'
const Home = { template: '