vue-router
Version:
> To see what versions are currently supported, please refer to the [Security Policy](./packages/router/SECURITY.md).
1,413 lines • 100 kB
text/typescript
/*!
* vue-router v5.2.0
* (c) 2026 Eduardo San Martin Morote
* @license MIT
*/
import { AllowedComponentProps, AnchorHTMLAttributes, App, Component as Component$1, ComponentCustomProps, ComponentPublicInstance, ComputedRef, DefineComponent, EffectScope, MaybeRef, ShallowRef, UnwrapRef, VNode, VNodeProps } from "vue";
//#region src/config.d.ts
/**
* Allows customizing existing types of the router that are used globally like `$router`, `<RouterLink>`, etc. **ONLY FOR INTERNAL USAGE**.
*
* - `Router` - swaps the public {@link Router} type (e.g. to `EXPERIMENTAL_Router`)
* - `$router` - the router instance
* - `$route` - the current route location
* - `beforeRouteEnter` - Page component option
* - `beforeRouteUpdate` - Page component option
* - `beforeRouteLeave` - Page component option
* - `RouterLink` - RouterLink Component
* - `RouterView` - RouterView Component
*
* @internal
*/
interface TypesConfig {}
//#endregion
//#region src/query.d.ts
/**
* Possible values in normalized {@link LocationQuery}. `null` renders the query
* param but without an `=`.
*
* @example
* ```
* ?isNull&isEmpty=&other=other
* gives
* `{ isNull: null, isEmpty: '', other: 'other' }`.
* ```
*
* @internal
*/
type LocationQueryValue$1 = string | null;
/**
* Possible values when defining a query. `undefined` allows to remove a value.
*
* @internal
*/
type LocationQueryValueRaw = LocationQueryValue$1 | number | undefined;
/**
* Normalized query object that appears in {@link RouteLocationNormalized}
*
* @public
*/
type LocationQuery$1 = Record<string, LocationQueryValue$1 | LocationQueryValue$1[]>;
/**
* Loose {@link LocationQuery} object that can be passed to functions like
* {@link Router.push} and {@link Router.replace} or anywhere when creating a
* {@link RouteLocationRaw}
*
* @public
*/
type LocationQueryRaw = Record<string | number, LocationQueryValueRaw | LocationQueryValueRaw[]>;
/**
* Stringifies a {@link LocationQueryRaw} object. Like `URLSearchParams`, it
* doesn't prepend a `?`
*
* @internal
*
* @param query - query object to stringify
* @returns string version of the query without the leading `?`
*/
declare function stringifyQuery(query: LocationQueryRaw | undefined): string;
//#endregion
//#region src/typed-routes/route-map.d.ts
/**
* Helper type to define a Typed `RouteRecord`
* @see {@link RouteRecord}
*/
interface RouteRecordInfo<Name extends string | symbol = string, Path extends string = string, ParamsRaw extends RouteParamsRawGeneric = RouteParamsRawGeneric, Params extends RouteParamsGeneric = RouteParamsGeneric, ChildrenNames extends string | symbol = never> {
name: Name;
path: Path;
paramsRaw: ParamsRaw;
params: Params;
childrenNames: ChildrenNames;
}
type RouteRecordInfoGeneric = RouteRecordInfo<string | symbol, string, RouteParamsRawGeneric, RouteParamsGeneric, string | symbol>;
/**
* Convenience type to get the typed RouteMap or a generic one if not provided.
* It is extracted from the {@link TypesConfig} if it exists, it becomes
* {@link RouteMapGeneric} otherwise.
*/
type RouteMap = TypesConfig extends Record<'RouteNamedMap', infer RouteNamedMap> ? RouteNamedMap : RouteMapGeneric;
/**
* Generic version of the `RouteMap`.
*/
type RouteMapGeneric = Record<string | symbol, RouteRecordInfoGeneric>;
//#endregion
//#region src/types/utils.d.ts
/**
* Creates a union type that still allows autocompletion for strings.
* @internal
*/
type _LiteralUnion<LiteralType, BaseType extends string = string> = LiteralType | (BaseType & Record<never, never>);
/**
* Maybe a promise maybe not
* @internal
*/
type _Awaitable$1<T> = T | PromiseLike<T>;
//#endregion
//#region src/typed-routes/route-records.d.ts
/**
* @internal
*/
type RouteRecordRedirectOption = RouteLocationRaw | ((to: RouteLocation, from: RouteLocationNormalizedLoaded) => RouteLocationRaw);
/**
* Generic version of {@link RouteRecordName}.
*/
type RouteRecordNameGeneric = string | symbol | undefined;
/**
* @internal
*/
type _RouteRecordProps<Name extends keyof RouteMap = keyof RouteMap> = boolean | Record<string, any> | ((to: RouteLocationNormalized<Name>) => Record<string, any>);
//#endregion
//#region src/typed-routes/route-location.d.ts
/**
* Generic version of {@link RouteLocation}. It is used when no {@link RouteMap} is provided.
*/
interface RouteLocationGeneric extends _RouteLocationBase, RouteLocationOptions {
/**
* Array of {@link RouteRecord} containing components as they were
* passed when adding records. It can also contain redirect records. This
* can't be used directly. **This property is non-enumerable**.
*/
matched: RouteRecord[];
}
/**
* Helper to generate a type safe version of the {@link RouteLocation} type.
*/
interface RouteLocationTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; }, Name extends keyof RouteMap> extends RouteLocationGeneric {
name: Extract<Name, string | symbol>;
params: RouteMap[Name]['params'];
}
/**
* List of all possible {@link RouteLocation} indexed by the route name.
* @internal
*/
type RouteLocationTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationTyped<RouteMap, N>; };
/**
* Generic version of {@link RouteLocationNormalized} that is used when no {@link RouteMap} is provided.
*/
interface RouteLocationNormalizedGeneric extends _RouteLocationBase {
name: RouteRecordNameGeneric;
/**
* Array of {@link RouteRecordNormalized}
*/
matched: RouteRecordNormalized[];
}
/**
* Helper to generate a type safe version of the {@link RouteLocationNormalized} type.
*/
interface RouteLocationNormalizedTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric, Name extends keyof RouteMap = keyof RouteMap> extends RouteLocationNormalizedGeneric {
name: Extract<Name, string | symbol>;
params: RouteMap[Name]['params'];
/**
* Array of {@link RouteRecordNormalized}
*/
matched: RouteRecordNormalized[];
}
/**
* List of all possible {@link RouteLocationNormalized} indexed by the route name.
* @internal
*/
type RouteLocationNormalizedTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationNormalizedTyped<RouteMap, N>; };
/**
* Generic version of {@link RouteLocationNormalizedLoaded} that is used when no {@link RouteMap} is provided.
*/
interface RouteLocationNormalizedLoadedGeneric extends RouteLocationNormalizedGeneric {
/**
* Array of {@link RouteLocationMatched} containing only plain components (any
* lazy-loaded components have been loaded and were replaced inside the
* `components` object) so it can be directly used to display routes. It
* cannot contain redirect records either. **This property is non-enumerable**.
*/
matched: RouteLocationMatched[];
}
/**
* Helper to generate a type safe version of the {@link RouteLocationNormalizedLoaded} type.
*/
interface RouteLocationNormalizedLoadedTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric, Name extends keyof RouteMap = keyof RouteMap> extends RouteLocationNormalizedLoadedGeneric {
name: Extract<Name, string | symbol>;
params: RouteMap[Name]['params'];
}
/**
* List of all possible {@link RouteLocationNormalizedLoaded} indexed by the route name.
* @internal
*/
type RouteLocationNormalizedLoadedTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationNormalizedLoadedTyped<RouteMap, N>; };
/**
* Generic version of {@link RouteLocationAsRelative}. It is used when no {@link RouteMap} is provided.
*/
interface RouteLocationAsRelativeGeneric extends RouteQueryAndHash, RouteLocationOptions {
name?: RouteRecordNameGeneric;
params?: RouteParamsRawGeneric;
/**
* A relative path to the current location. This property should be removed
*/
path?: undefined;
}
/**
* Helper to generate a type safe version of the {@link RouteLocationAsRelative} type.
*/
interface RouteLocationAsRelativeTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric, Name extends keyof RouteMap = keyof RouteMap> extends RouteLocationAsRelativeGeneric {
name?: Extract<Name, string | symbol>;
params?: RouteMap[Name]['paramsRaw'];
}
/**
* List of all possible {@link RouteLocationAsRelative} indexed by the route name.
* @internal
*/
type RouteLocationAsRelativeTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationAsRelativeTyped<RouteMap, N>; };
/**
* Generic version of {@link RouteLocationAsPath}. It is used when no {@link RouteMap} is provided.
*/
interface RouteLocationAsPathGeneric extends RouteQueryAndHash, RouteLocationOptions {
/**
* Percentage encoded pathname section of the URL.
*/
path: string;
}
/**
* Helper to generate a type safe version of the {@link RouteLocationAsPath} type.
*/
interface RouteLocationAsPathTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric, Name extends keyof RouteMap = keyof RouteMap> extends RouteLocationAsPathGeneric {
path: _LiteralUnion<RouteMap[Name]['path']>;
}
/**
* List of all possible {@link RouteLocationAsPath} indexed by the route name.
* @internal
*/
type RouteLocationAsPathTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationAsPathTyped<RouteMap, N>; };
/**
* Helper to generate a type safe version of the {@link RouteLocationAsString} type.
*/
type RouteLocationAsStringTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric, Name extends keyof RouteMap = keyof RouteMap> = RouteMap[Name]['path'];
/**
* List of all possible {@link RouteLocationAsString} indexed by the route name.
* @internal
*/
type RouteLocationAsStringTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationAsStringTyped<RouteMap, N>; };
/**
* Generic version of {@link RouteLocationResolved}. It is used when no {@link RouteMap} is provided.
*/
interface RouteLocationResolvedGeneric extends RouteLocationGeneric {
/**
* Resolved `href` for the route location that will be set on the `<a href="...">`.
*/
href: string;
}
/**
* Helper to generate a type safe version of the {@link RouteLocationResolved} type.
*/
interface RouteLocationResolvedTyped<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; }, Name extends keyof RouteMap> extends RouteLocationTyped<RouteMap, Name> {
/**
* Resolved `href` for the route location that will be set on the `<a href="...">`.
*/
href: string;
}
/**
* List of all possible {@link RouteLocationResolved} indexed by the route name.
* @internal
*/
type RouteLocationResolvedTypedList<RouteMap extends { [K in keyof RouteMap]: RouteRecordInfoGeneric; } = RouteMapGeneric> = { [N in keyof RouteMap]: RouteLocationResolvedTyped<RouteMap, N>; };
/**
* Type safe versions of types that are exposed by vue-router. We have to use a generic check to allow for names to be `undefined` when no `RouteMap` is provided.
*/
/**
* {@link RouteLocationRaw} resolved using the matcher
*/
type RouteLocation<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationGeneric : RouteLocationTypedList<RouteMap>[Name];
/**
* Similar to {@link RouteLocation} but its
* {@link RouteLocationNormalizedTyped.matched | `matched` property} cannot contain redirect records
*/
type RouteLocationNormalized<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationNormalizedGeneric : RouteLocationNormalizedTypedList<RouteMap>[Name];
/**
* Similar to {@link RouteLocationNormalized} but its `components` do not contain any function to lazy load components.
* In other words, it's ready to be rendered by `<RouterView>`.
*/
type RouteLocationNormalizedLoaded<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationNormalizedLoadedGeneric : RouteLocationNormalizedLoadedTypedList<RouteMap>[Name];
/**
* Route location relative to the current location. It accepts other properties than `path` like `params`, `query` and
* `hash` to conveniently change them.
*/
type RouteLocationAsRelative<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationAsRelativeGeneric : RouteLocationAsRelativeTypedList<RouteMap>[Name];
/**
* Route location resolved with {@link Router | `router.resolve()`}.
*/
type RouteLocationResolved<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationResolvedGeneric : RouteLocationResolvedTypedList<RouteMap>[Name];
/**
* Same as {@link RouteLocationAsPath} but as a string literal.
*/
type RouteLocationAsString<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? string : _LiteralUnion<RouteLocationAsStringTypedList<RouteMap>[Name], string>;
/**
* Route location as an object with a `path` property.
*/
type RouteLocationAsPath<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationAsPathGeneric : RouteLocationAsPathTypedList<RouteMap>[Name];
/**
* Route location that can be passed to `router.push()` and other user-facing APIs.
*/
type RouteLocationRaw<Name extends keyof RouteMap = keyof RouteMap> = RouteMapGeneric extends RouteMap ? RouteLocationAsString | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric : _LiteralUnion<RouteLocationAsStringTypedList<RouteMap>[Name], string> | RouteLocationAsRelativeTypedList<RouteMap>[Name] | RouteLocationAsPathTypedList<RouteMap>[Name];
//#endregion
//#region src/errors.d.ts
/**
* Flags so we can combine them when checking for multiple errors. This is the internal version of
* {@link NavigationFailureType}.
*
* @internal
*/
declare const enum ErrorTypes {
MATCHER_NOT_FOUND = 1,
NAVIGATION_GUARD_REDIRECT = 2,
NAVIGATION_ABORTED = 4,
NAVIGATION_CANCELLED = 8,
NAVIGATION_DUPLICATED = 16
}
/**
* Extended Error that contains extra information regarding a failed navigation.
*/
interface NavigationFailure extends Error {
/**
* Type of the navigation. One of {@link NavigationFailureType}
*/
type: ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_DUPLICATED;
/**
* Route location we were navigating from
*/
from: RouteLocationNormalized;
/**
* Route location we were navigating to
*/
to: RouteLocationNormalized;
}
/**
* Internal type to define an ErrorHandler
*
* @param error - error thrown
* @param to - location we were navigating to when the error happened
* @param from - location we were navigating from when the error happened
* @internal
*/
interface _ErrorListener {
(error: any, to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded): any;
}
//#endregion
//#region src/typed-routes/navigation-guards.d.ts
/**
* Return types for a Navigation Guard. Based on `TypesConfig`
*
* @see {@link TypesConfig}
*/
type NavigationGuardReturn = void | Error | boolean | RouteLocationRaw;
/**
* Navigation Guard with a type parameter for `this`.
* @see {@link TypesConfig}
*/
interface NavigationGuardWithThis<T> {
(this: T, to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded,
/**
* @deprecated Return a value from the guard instead of calling `next(value)`.
* The callback will be removed in a future version of Vue Router.
*/
next: NavigationGuardNext): _Awaitable$1<NavigationGuardReturn>;
}
/**
* In `router.beforeResolve((to) => {})`, the `to` is typed as `RouteLocationNormalizedLoaded`, not
* `RouteLocationNormalized` like in `router.beforeEach()`. In practice it doesn't change much as users do not rely on
* the difference between them but if we update the type in vue-router, we will have to update this type too.
* @internal
*/
interface _NavigationGuardResolved {
(this: undefined, to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded,
/**
* @deprecated Return a value from the guard instead of calling `next(value)`.
* The callback will be removed in a future version of Vue Router.
*/
next: NavigationGuardNext): _Awaitable$1<NavigationGuardReturn>;
}
/**
* Navigation Guard.
*/
interface NavigationGuard {
(to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded,
/**
* @deprecated Return a value from the guard instead of calling `next(value)`.
* The callback will be removed in a future version of Vue Router.
*/
next: NavigationGuardNext): _Awaitable$1<NavigationGuardReturn>;
}
/**
* Navigation hook triggered after a navigation is settled.
*/
interface NavigationHookAfter {
(to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded, failure?: NavigationFailure | void): unknown;
}
/**
* Callback passed to navigation guards to continue or abort the navigation.
*
* @deprecated Prefer returning a value from the guard instead of calling
* `next(value)`. The callback will be removed in a future version of Vue Router.
*/
interface NavigationGuardNext {
(): void;
(error: Error): void;
(location: RouteLocationRaw): void;
(valid: boolean | undefined): void;
(cb: NavigationGuardNextCallback): void;
}
/**
* Callback that can be passed to `next()` in `beforeRouteEnter()` guards.
*/
type NavigationGuardNextCallback = (vm: ComponentPublicInstance) => unknown;
//#endregion
//#region src/matcher/types.d.ts
/**
* Normalized version of a {@link RouteRecord | route record}.
*/
interface RouteRecordNormalized {
/**
* {@inheritDoc _RouteRecordBase.path}
*/
path: _RouteRecordBase['path'];
/**
* {@inheritDoc _RouteRecordBase.redirect}
*/
redirect: _RouteRecordBase['redirect'] | undefined;
/**
* {@inheritDoc _RouteRecordBase.name}
*/
name: _RouteRecordBase['name'];
/**
* {@inheritDoc RouteRecordMultipleViews.components}
*/
components: RouteRecordMultipleViews['components'] | null | undefined;
/**
* Contains the original modules for lazy loaded components.
* @internal
*/
mods: Record<string, unknown>;
/**
* Nested route records.
*/
children: RouteRecordRaw[];
/**
* {@inheritDoc _RouteRecordBase.meta}
*/
meta: Exclude<_RouteRecordBase['meta'], void>;
/**
* {@inheritDoc RouteRecordMultipleViews.props}
*/
props: Record<string, _RouteRecordProps>;
/**
* Registered beforeEnter guards
*/
beforeEnter: _RouteRecordBase['beforeEnter'];
/**
* Registered leave guards
*
* @internal
*/
leaveGuards: Set<NavigationGuard>;
/**
* Registered update guards
*
* @internal
*/
updateGuards: Set<NavigationGuard>;
/**
* Registered beforeRouteEnter callbacks passed to `next` or returned in guards
*
* @internal
*/
enterCallbacks: Record<string, NavigationGuardNextCallback[]>;
/**
* Mounted route component instances
* Having the instances on the record mean beforeRouteUpdate and
* beforeRouteLeave guards can only be invoked with the latest mounted app
* instance if there are multiple application instances rendering the same
* view, basically duplicating the content on the page, which shouldn't happen
* in practice. It will work if multiple apps are rendering different named
* views.
*/
instances: Record<string, ComponentPublicInstance | undefined | null>;
/**
* Defines if this record is the alias of another one. This property is
* `undefined` if the record is the original one.
*/
aliasOf: RouteRecordNormalized | undefined;
}
/**
* {@inheritDoc RouteRecordNormalized}
*/
type RouteRecord = RouteRecordNormalized;
//#endregion
//#region src/matcher/pathParserRanker.d.ts
/**
* @internal
*/
interface _PathParserOptions {
/**
* Makes the RegExp case-sensitive.
*
* @defaultValue `false`
*/
sensitive?: boolean;
/**
* Whether to disallow a trailing slash or not.
*
* @defaultValue `false`
*/
strict?: boolean;
/**
* Should the RegExp match from the beginning by prepending a `^` to it.
* @internal
*
* @defaultValue `true`
*/
start?: boolean;
/**
* Should the RegExp match until the end by appending a `$` to it.
*
* @deprecated this option will alsways be `true` in the future. Open a discussion in vuejs/router if you need this to be `false`
*
* @defaultValue `true`
*/
end?: boolean;
}
type PathParserOptions = Pick<_PathParserOptions, 'end' | 'sensitive' | 'strict'>;
//#endregion
//#region src/history/common.d.ts
type HistoryLocation = string;
/**
* Allowed variables in HTML5 history state. Note that pushState clones the state
* passed and does not accept everything: e.g.: it doesn't accept symbols, nor
* functions as values. It also ignores Symbols as keys.
*
* @internal
*/
type HistoryStateValue = string | number | boolean | null | undefined | HistoryState | HistoryStateArray;
/**
* Allowed HTML history.state
*/
interface HistoryState {
[x: number]: HistoryStateValue;
[x: string]: HistoryStateValue;
}
/**
* Allowed arrays for history.state.
*
* @internal
*/
interface HistoryStateArray extends Array<HistoryStateValue> {}
declare enum NavigationType {
pop = "pop",
push = "push"
}
declare enum NavigationDirection {
back = "back",
forward = "forward",
unknown = ""
}
interface NavigationInformation {
type: NavigationType;
direction: NavigationDirection;
delta: number;
}
interface NavigationCallback {
(to: HistoryLocation, from: HistoryLocation, information: NavigationInformation): void;
}
/**
* Interface implemented by History implementations that can be passed to the
* router as {@link Router.history}
*
* @alpha
*/
interface RouterHistory {
/**
* Base path that is prepended to every url. This allows hosting an SPA at a
* sub-folder of a domain like `example.com/sub-folder` by having a `base` of
* `/sub-folder`
*/
readonly base: string;
/**
* Current History location
*/
readonly location: HistoryLocation;
/**
* Current History state
*/
readonly state: HistoryState;
/**
* Navigates to a location. In the case of an HTML5 History implementation,
* this will call `history.pushState` to effectively change the URL.
*
* @param to - location to push
* @param data - optional {@link HistoryState} to be associated with the
* navigation entry
*/
push(to: HistoryLocation, data?: HistoryState): void;
/**
* Same as {@link RouterHistory.push} but performs a `history.replaceState`
* instead of `history.pushState`
*
* @param to - location to set
* @param data - optional {@link HistoryState} to be associated with the
* navigation entry
*/
replace(to: HistoryLocation, data?: HistoryState): void;
/**
* Traverses history in a given direction.
*
* @example
* ```js
* myHistory.go(-1) // equivalent to window.history.back()
* myHistory.go(1) // equivalent to window.history.forward()
* ```
*
* @param delta - distance to travel. If delta is \< 0, it will go back,
* if it's \> 0, it will go forward by that amount of entries.
* @param triggerListeners - whether this should trigger listeners attached to
* the history
*/
go(delta: number, triggerListeners?: boolean): void;
/**
* Attach a listener to the History implementation that is triggered when the
* navigation is triggered from outside (like the Browser back and forward
* buttons) or when passing `true` to {@link RouterHistory.back} and
* {@link RouterHistory.forward}
*
* @param callback - listener to attach
* @returns a callback to remove the listener
*/
listen(callback: NavigationCallback): () => void;
/**
* Generates the corresponding href to be used in an anchor tag.
*
* @param location - history location that should create an href
*/
createHref(location: HistoryLocation): string;
/**
* Clears any event listener attached by the history implementation.
*/
destroy(): void;
}
//#endregion
//#region src/experimental/query.d.ts
/**
* NOTE: some types here are duplicated from ../query.ts
* because they will change to always have (string | null)[] values
*/
/**
* Possible values in normalized {@link LocationQuery}. `null` renders the query
* param but without an `=`.
*
* @internal
*/
type LocationQueryValue = string | null;
/**
* Normalized query object that appears in {@link RouteLocationNormalized}
*
* @public
*/
type LocationQuery = Record<string, LocationQueryValue | LocationQueryValue[]>;
/**
* Transforms a queryString into a {@link LocationQuery} object. Accept both, a
* version with the leading `?` and without. Uses `Object.create(null)` so the
* returned object cannot be exploited via prototype pollution.
*
* @internal
*
* @param search - search string to parse
* @returns a query object
*/
declare function experimental_parseQuery(search: string): LocationQuery;
//#endregion
//#region src/scrollBehavior.d.ts
/**
* Scroll position similar to
* {@link https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions | `ScrollToOptions`}.
* Note that not all browsers support `behavior`.
*/
type ScrollPositionCoordinates = {
behavior?: ScrollOptions['behavior'];
left?: number;
top?: number;
};
/**
* Internal normalized version of {@link ScrollPositionCoordinates} that always
* has `left` and `top` coordinates. Must be a type to be assignable to HistoryStateValue.
*
* @internal
*/
type _ScrollPositionNormalized = {
behavior?: ScrollOptions['behavior'];
left: number;
top: number;
};
/**
* Type of the `scrollBehavior` option that can be passed to `createRouter`.
*/
interface RouterScrollBehavior {
/**
* @param to - Route location where we are navigating to
* @param from - Route location where we are navigating from
* @param savedPosition - saved position if it exists, `null` otherwise
*/
(to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, savedPosition: _ScrollPositionNormalized | null): Awaitable<ScrollPosition | false | void>;
}
interface ScrollPositionElement extends ScrollToOptions {
/**
* A valid CSS selector. Note some characters must be escaped in id selectors (https://mathiasbynens.be/notes/css-escapes).
* @example
* Here are a few examples:
*
* - `.title`
* - `.content:first-child`
* - `#marker`
* - `#marker\~with\~symbols`
* - `#marker.with.dot`: selects `class="with dot" id="marker"`, not `id="marker.with.dot"`
*
*/
el: string | Element;
}
type ScrollPosition = ScrollPositionCoordinates | ScrollPositionElement;
type Awaitable<T> = T | PromiseLike<T>;
//#endregion
//#region src/router.d.ts
/**
* Options to initialize a {@link Router} instance.
*/
interface RouterOptions extends EXPERIMENTAL_RouterOptions_Base {
/**
* Initial list of routes that should be added to the router.
*/
routes: Readonly<RouteRecordRaw[]>;
}
/**
* Router instance.
*/
interface RouterClassic extends EXPERIMENTAL_Router_Base<RouteRecordNormalized> {
/**
* Original options object passed to create the Router
*/
readonly options: RouterOptions;
/**
* Add a new {@link RouteRecordRaw | route record} as the child of an existing route.
*
* @param parentName - Parent Route Record where `route` should be appended at
* @param route - Route Record to add
*/
addRoute(parentName: NonNullable<RouteRecordNameGeneric>, route: RouteRecordRaw): () => void;
/**
* Add a new {@link RouteRecordRaw | route record} to the router.
*
* @param route - Route Record to add
*/
addRoute(route: RouteRecordRaw): () => void;
/**
* Remove an existing route by its name.
*
* @param name - Name of the route to remove
*/
removeRoute(name: NonNullable<RouteRecordNameGeneric>): void;
/**
* Delete all routes from the router.
*/
clearRoutes(): void;
}
/**
* Router instance.
*
* By default this resolves to the classic {@link RouterClassic}. Augment
* {@link TypesConfig} with a `Router` slot to swap the public type.
*
* ```ts
* import { router } from './router'
* declare module 'vue-router' {
* interface TypesConfig {
* Router: typeof router
* }
* }
* ```
*/
type Router = TypesConfig extends Record<'Router', infer T> ? T : RouterClassic;
//#endregion
//#region src/RouterLink.d.ts
interface RouterLinkOptions {
/**
* Route Location the link should navigate to when clicked on.
*/
to: RouteLocationRaw;
/**
* Calls `router.replace` instead of `router.push`.
*/
replace?: boolean;
}
interface RouterLinkProps extends RouterLinkOptions {
/**
* Whether RouterLink should not wrap its content in an `a` tag. Useful when
* using `v-slot` to create a custom RouterLink
*/
custom?: boolean;
/**
* Class to apply when the link is active
*/
activeClass?: string;
/**
* Class to apply when the link is exact active
*/
exactActiveClass?: string;
/**
* Value passed to the attribute `aria-current` when the link is exact active.
*
* @defaultValue `'page'`
*/
ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
/**
* Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
*/
viewTransition?: boolean;
}
/**
* Options passed to {@link useLink}.
*/
interface UseLinkOptions<Name extends keyof RouteMap = keyof RouteMap> {
to: MaybeRef<RouteLocationAsString | RouteLocationAsRelativeTyped<RouteMap, Name> | RouteLocationAsPath | RouteLocationRaw>;
replace?: MaybeRef<boolean | undefined>;
/**
* Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
*/
viewTransition?: boolean;
}
/**
* Return type of {@link useLink}.
* @internal
*/
interface UseLinkReturn<Name extends keyof RouteMap = keyof RouteMap> {
route: ComputedRef<RouteLocationResolved<Name>>;
href: ComputedRef<string>;
isActive: ComputedRef<boolean>;
isExactActive: ComputedRef<boolean>;
navigate(e?: MouseEvent): Promise<void | NavigationFailure>;
}
/**
* Returns the internal behavior of a {@link RouterLink} without the rendering part.
*
* @param props - a `to` location and an optional `replace` flag
*/
declare function useLink<Name extends keyof RouteMap = keyof RouteMap>(props: UseLinkOptions<Name>): UseLinkReturn<Name>;
/**
* Component to render a link that triggers a navigation on click.
*/
declare const RouterLink: _RouterLinkI;
/**
* @internal
*/
type _RouterLinkPropsTypedBase = AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterLinkProps;
/**
* @internal
*/
type RouterLinkPropsTyped<Custom extends boolean | undefined> = Custom extends true ? _RouterLinkPropsTypedBase & {
custom: true;
} : _RouterLinkPropsTypedBase & {
custom?: false | undefined;
} & Omit<AnchorHTMLAttributes, 'href'>;
/**
* Typed version of the `RouterLink` component. Its generic defaults to the typed router, so it can be inferred
* automatically for JSX.
*
* @internal
*/
interface _RouterLinkI {
new <Custom extends boolean | undefined = boolean | undefined>(): {
$props: RouterLinkPropsTyped<Custom>;
$slots: {
default?: ({ route, href, isActive, isExactActive, navigate }: UnwrapRef<UseLinkReturn>) => VNode[];
};
};
/**
* Access to `useLink()` without depending on using vue-router
*
* @internal
*/
useLink: typeof useLink;
}
//#endregion
//#region src/RouterView.d.ts
interface RouterViewProps {
name?: string;
route?: RouteLocationNormalized;
}
/**
* Component to display the current route the user is at.
*/
declare const RouterView: {
new (): {
$props: AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterViewProps;
$slots: {
default?: ({ Component, route }: {
Component: VNode;
route: RouteLocationNormalizedLoaded;
}) => VNode[];
};
};
};
//#endregion
//#region src/index.d.ts
declare module 'vue' {
interface ComponentCustomOptions {
/**
* Guard called when the router is navigating to the route that is rendering
* this component from a different route. Differently from `beforeRouteUpdate`
* and `beforeRouteLeave`, `beforeRouteEnter` does not have access to the
* component instance through `this` because it triggers before the component
* is even mounted.
*
* @param to - RouteLocationRaw we are navigating to
* @param from - RouteLocationRaw we are navigating from
* @param next - function to validate, cancel or modify (by redirecting) the
* navigation
*/
beforeRouteEnter?: TypesConfig extends Record<'beforeRouteEnter', infer T> ? T : NavigationGuardWithThis<undefined>;
/**
* Guard called whenever the route that renders this component has changed, but
* it is reused for the new route. This allows you to guard for changes in
* params, the query or the hash.
*
* @param to - RouteLocationRaw we are navigating to
* @param from - RouteLocationRaw we are navigating from
* @param next - function to validate, cancel or modify (by redirecting) the
* navigation
*/
beforeRouteUpdate?: TypesConfig extends Record<'beforeRouteUpdate', infer T> ? T : NavigationGuard;
/**
* Guard called when the router is navigating away from the current route that
* is rendering this component.
*
* @param to - RouteLocationRaw we are navigating to
* @param from - RouteLocationRaw we are navigating from
* @param next - function to validate, cancel or modify (by redirecting) the
* navigation
*/
beforeRouteLeave?: TypesConfig extends Record<'beforeRouteLeave', infer T> ? T : NavigationGuard;
}
interface ComponentCustomProperties {
/**
* Normalized current location. See {@link RouteLocationNormalizedLoaded}.
*/
$route: TypesConfig extends Record<'$route', infer T> ? T : RouteLocationNormalizedLoaded;
/**
* {@link Router} instance used by the application.
*/
$router: TypesConfig extends Record<'$router', infer T> ? T : Router;
}
interface GlobalComponents {
RouterView: TypesConfig extends Record<'RouterView', infer T> ? T : typeof RouterView;
RouterLink: TypesConfig extends Record<'RouterLink', infer T> ? T : typeof RouterLink;
}
}
//#endregion
//#region src/experimental/data-loaders/utils.d.ts
/**
* Object and promise of the object itself. Used when we can await some of the properties of an object to be loaded.
* @internal
*/
type _PromiseMerged<PromiseType, RawType = PromiseType> = RawType & Promise<PromiseType>;
//#endregion
//#region src/experimental/data-loaders/navigation-guard.d.ts
/**
* Possible values to change the result of a navigation within a loader
* @internal
*/
type _DataLoaderRedirectResult = Exclude<ReturnType<NavigationGuard>, Promise<unknown> | Function | true | void | undefined>;
/**
* Allows data loaders to change navigation. Called by {@link reroute}.
*
* @internal
*/
declare class NavigationResult {
readonly value: _DataLoaderRedirectResult;
constructor(value: _DataLoaderRedirectResult);
}
//#endregion
//#region src/experimental/data-loaders/types-config.d.ts
/**
* The default error type used for data loaders. Can be customized via {@link TypesConfig}.
*
* @example
* ```ts
* // types-extension.d.ts
* import 'vue-router/experimental'
* export {}
* declare module 'vue-router/experimental' {
* interface TypesConfig {
* Error: MyCustomError
* }
* }
* ```
*
* @internal
*/
type ErrorDefault = TypesConfig extends Record<'Error', infer E> ? E : Error;
//#endregion
//#region src/experimental/data-loaders/createDataLoader.d.ts
/**
* Base type for a data loader entry. Each Data Loader has its own entry in the `loaderEntries` (accessible via `[LOADER_ENTRIES_KEY]`) map.
*/
interface DataLoaderEntryBase<TData = unknown, TError = unknown, TDataInitial extends TData | undefined = TData | undefined> {
/**
* Data stored in the entry.
*/
data: ShallowRef<TData | TDataInitial>;
/**
* Error if there was an error.
*/
error: ShallowRef<TError | null>;
/**
* Location the data was loaded for or `null` if the data is not loaded.
*/
to: RouteLocationNormalizedLoaded | null;
/**
* Whether there is an ongoing request.
*/
isLoading: ShallowRef<boolean>;
options: DefineDataLoaderOptionsBase_LaxData;
/**
* Called by the navigation guard when the navigation is duplicated. Should be used to reset pendingTo and pendingLoad and any other property that should be reset.
*/
resetPending: () => void;
/**
* The latest pending load. Allows to verify if the load is still valid when it resolves.
*/
pendingLoad: Promise<void> | null;
/**
* The latest pending navigation's `to` route. Used to verify if the navigation is still valid when it resolves.
*/
pendingTo: RouteLocationNormalizedLoaded | null;
/**
* Data that was staged by a loader. This is used to avoid showing the old data while the new data is loading. Calling
* the internal `commit()` function will replace the data with the staged data.
*/
staged: TData | typeof STAGED_NO_VALUE;
/**
* Error that was staged by a loader. This is used to avoid showing the old error while the new data is loading.
* Calling the internal `commit()` function will replace the error with the staged error.
*/
stagedError: TError | null;
/**
* Other data loaders that depend on this one. This is used to invalidate the data when a dependency is invalidated.
*/
children: Set<DataLoaderEntryBase>;
/**
* Commits the pending data to the entry. This is called by the navigation guard when all non-lazy loaders have
* finished loading. It should be implemented by the loader. It **must be called** from the entry itself:
* `entry.commit(to)`.
*/
commit(to: RouteLocationNormalizedLoaded): void;
}
/**
* Common properties for the options of `defineLoader()`. Types are `unknown` to allow for more specific types in the
* extended types while having documentation in one single place.
* @internal
*/
interface _DefineDataLoaderOptionsBase_Common {
/**
* When the data should be committed to the entry. In the case of lazy loaders, the loader will try to commit the data
* after all non-lazy loaders have finished loading, but it might not be able to if the lazy loader hasn't been
* resolved yet.
*
* @see {@link DefineDataLoaderCommit}
* @defaultValue `'after-load'`
*/
commit?: DefineDataLoaderCommit;
/**
* Whether the data should be lazy loaded without blocking the client side navigation or not. When set to true, the loader will no longer block the navigation and the returned composable can be called even
* without having the data ready.
*
* @defaultValue `false`
*/
lazy?: unknown;
/**
* Whether this loader should be awaited on the server side or not. Combined with the `lazy` option, this gives full
* control over how to await for the data.
*
* @defaultValue `true`
*/
server?: unknown;
/**
* List of _expected_ errors that shouldn't abort the navigation (for non-lazy loaders). Provide a list of
* constructors that can be checked with `instanceof` or a custom function that returns `true` for expected errors. Can also be set to `true` to accept all globally defined errors. Defaults to `false` to abort on any error.
* @default `false`
*/
errors?: unknown;
}
/**
* Options for a data loader that returns a data that is possibly `undefined`. Available for data loaders
* implementations so they can be used in `defineLoader()` overloads.
*/
interface DefineDataLoaderOptionsBase_LaxData extends _DefineDataLoaderOptionsBase_Common {
lazy?: boolean | ((to: RouteLocationNormalizedLoaded, from?: RouteLocationNormalizedLoaded) => boolean);
server?: boolean;
errors?: boolean | Array<new (...args: any[]) => any> | ((reason?: unknown) => boolean);
}
/**
* When the data should be committed to the entry.
* - `immediate`: the data is committed as soon as it is loaded.
* - `after-load`: the data is committed after all non-lazy loaders have finished loading.
*/
type DefineDataLoaderCommit = 'immediate' | 'after-load';
/**
* Data Loader composable returned by `defineLoader()`.
* @see {@link DefineDataLoader}
*/
interface UseDataLoader<Data = unknown, TError = unknown> {
[IS_USE_DATA_LOADER_KEY]: true;
/**
* Data Loader composable returned by `defineLoader()`.
*
* @example
* Returns the Data loader data, isLoading, error etc. Meant to be used in `setup()` or `<script setup>` **without `await`**:
* ```vue
* <script setup>
* const { data, isLoading, error } = useUserData()
* </script>
* ```
*
* @example
* It also returns a promise of the data when used in nested loaders. Note this `data` is **not a ref**. This is not meant to be used in `setup()` or `<script setup>`.
* ```ts
* export const useUserConnections = defineLoader(async () => {
* const user = await useUserData()
* return fetchUserConnections(user.id)
* })
* ```
*/
(): _PromiseMerged<Exclude<Data, NavigationResult | undefined>, UseDataLoaderResult<Exclude<Data, NavigationResult>, TError>>;
/**
* Internals of the data loader.
* @internal
*/
_: UseDataLoaderInternals<Exclude<Data, NavigationResult | undefined>, TError>;
}
/**
* Internal properties of a data loader composable. Used by the internal implementation of `defineLoader()`. **Should
* not be used in application code.**
*/
interface UseDataLoaderInternals<Data = unknown, TError = unknown> {
/**
* Loads the data from the cache if possible, otherwise loads it from the loader and awaits it.
*
* @param to - route location to load the data for
* @param router - router instance
* @param from - route location we are coming from
* @param parent - parent data loader entry
*/
load: (to: RouteLocationNormalizedLoaded, router: Router, from?: RouteLocationNormalizedLoaded, parent?: DataLoaderEntryBase) => Promise<void>;
/**
* Resolved options for the loader.
*/
options: DefineDataLoaderOptionsBase_LaxData;
/**
* Gets the entry associated with the router instance. Assumes the data loader has been loaded and that the entry
* exists.
*
* @param router - router instance
*/
getEntry(router: Router): DataLoaderEntryBase<Data, TError>;
}
/**
* Return value of a loader composable defined with `defineLoader()`.
*/
interface UseDataLoaderResult<TData = unknown, TError = ErrorDefault> {
/**
* Data returned by the loader. If the data loader is lazy, it will be undefined until the first load.
*/
data: ShallowRef<TData>;
/**
* Whether there is an ongoing request.
*/
isLoading: ShallowRef<boolean>;
/**
* Error if there was an error.
*/
error: ShallowRef<TError | null>;
/**
* Reload the data using the current route location. Returns a promise that resolves when the data is reloaded. This
* method should not be called during a navigation as it can conflict with an ongoing load and lead to
* inconsistencies.
*/
reload(): Promise<void>;
/**
* Reload the data using the route location passed as argument. Returns a promise that resolves when the data is reloaded.
*
* @param route - route location to load the data for
*/
reload(route: RouteLocationNormalizedLoaded): Promise<void>;
}
//#endregion
//#region src/experimental/data-loaders/symbols.d.ts
/**
* Retrieves the internal version of loaders.
* @internal
*/
declare const LOADER_SET_KEY: unique symbol;
/**
* Retrieves the internal version of loader entries.
* @internal
*/
declare const LOADER_ENTRIES_KEY: unique symbol;
/**
* Added to the loaders returned by `defineLoader()` to identify them.
* Allows to extract exported useData() from a component.
* @internal
*/
declare const IS_USE_DATA_LOADER_KEY: unique symbol;
/**
* Symbol used to save the pending location on the router.
* @internal
*/
declare const PENDING_LOCATION_KEY: unique symbol;
/**
* Symbol used to know there is no value staged for the loader and that commit should be skipped.
* @internal
*/
declare const STAGED_NO_VALUE: unique symbol;
/**
* Gives access to the current app and it's `runWithContext` method.
* @internal
*/
declare const APP_KEY: unique symbol;
/**
* Gives access to an AbortController that aborts when the navigation is canceled.
* @internal
*/
declare const ABORT_CONTROLLER_KEY: unique symbol;
/**
* Symbol used to save the initial data on the router.
* @internal
*/
declare const IS_SSR_KEY: unique symbol;
/**
* Symbol used to get the effect scope used for data loaders.
* @internal
*/
declare const DATA_LOADERS_EFFECT_SCOPE_KEY: unique symbol;
//#endregion
//#region src/experimental/data-loaders/defineLoader.d.ts
/**
* Symbol used to store the data in the router so it can be retrieved after the initial navigation.
* @internal
*/
declare const SERVER_INITIAL_DATA_KEY: unique symbol;
/**
* Initial data generated on server and consumed on client.
* @internal
*/
declare const INITIAL_DATA_KEY: unique symbol;
//#endregion
//#region src/experimental/data-loaders/meta-extensions.d.ts
/**
* Map type for the entries used by data loaders.
* @internal
*/
type _DefineLoaderEntryMap<DataLoaderEntry extends DataLoaderEntryBase<unknown> = DataLoaderEntryBase<unknown>> = WeakMap<object, DataLoaderEntry>;
/**
* The extensions added to the router instance for data loaders. These are used
* internally by the router and should not be accessed directly by users.
*
* @internal
*/
interface DataLoaderExtensions {
/**
* The entries used by data loaders. Put on the router for convenience.
* @internal
*/
[LOADER_ENTRIES_KEY]: _DefineLoaderEntryMap;
/**
* Pending navigation that is waiting for data loaders to resolve.
* @internal
*/
[PENDING_LOCATION_KEY]: RouteLocationNormalizedLoaded | null;
/**
* The app instance that is used by the router.
* @internal
*/
[APP_KEY]: App<unknown>;
/**
* Whether the router is running in server-side rendering mode.
* @internal
*/
[IS_SSR_KEY]: boolean;
/**
* The effect scope used to run data loaders.
* @internal
*/
[DATA_LOADERS_EFFECT_SCOPE_KEY]: EffectScope;
/**
* Gives access to the initial state during rendering. Should be set to `false` once it's consumed.
* Used by `defineLoader`
*
* @internal
*/
[SERVER_INITIAL_DATA_KEY]?: Record<string, unknown> | false;
/**
* Used by `defineLoader`
*
* @internal
*/
[INITIAL_DATA_KEY]?: Record<string, unknown> | false;
}
//#endregion
//#region src/experimental/router.d.ts
/**
* Options to initialize a {@link Router} instance.
*/
interface EXPERIMENTAL_RouterOptions_Base extends PathParserOptions {
/**
* History implementation used by the router. Most web applications should use
* `createWebHistory` but it requires the server to be properly configured.
* You can also use a _hash_ based history with `createWebHashHistory` that
* does not require any configuration on the server but isn't handled at all
* by search engines and does poorly on SEO.
*
* @example
* ```js
* createRouter({
* history: createWebHistory(),
* // other options...
* })
* ```
*/
history: RouterHistory;
/**
* Function to control scrolling when navigating between pages. Can return a
* Promise to delay scrolling.
*
* @see {@link RouterScrollBehavior}.
*
* @example
* ```js
* function scrollBehavior(to, from, savedPosition) {
* // `to` and `from` are both route locations
* // `savedPosition` can be null if there isn't one
* }
* ```
*/
scrollBehavior?: RouterScrollBehavior;
/**
* Custom implementation to parse a query. See its counterpart,
* {@link EXPERIMENTAL_RouterOptions_Base.stringifyQuery}.
*
* @example
* Let's say you want to use the [qs package](https://github.com/ljharb/qs)
* to parse queries, you can provide both `parseQuery` and `stringifyQuery`:
* ```js
* import qs from 'qs'
*
* createRouter({
* // other options...
* parseQuery: qs.parse,
* stringifyQuery: qs.stringify,
* })
* ```
*/
parseQuery?: typeof experimental_parseQuery;
/**
* Custom implementation to stringify a query object. Should not prepend a leading `?`.
* {@link parseQuery} counterpart to handle query parsing.
*/
stringifyQuery?: typeof stringifyQuery;
/**
* Default class applied to active {@link RouterLink}. If none is provided,
* `router-link-active` will be applied.
*/
linkActiveClass?: string;
/**
* Default class applied to exact active {@link RouterLink}. If none is provided,
* `router-link-exact-active` will be applied.
*/
linkExactActiveClass?: string;
}
/**
* Router base instance.
*
* @experimental This version is not stable, it's meant to replace {@link Router} in the future.
*/
interface EXPERIMENTAL_Router_Base<TRecord> extends DataLoaderExtensions {
/**
* Current {@link RouteLocationNormalized}
*/
readonly currentRoute: ShallowRef<RouteLocationNormalizedLoaded>;
/**
* Allows turning off the listening of history events. This is a low level api for micro-frontend.
*/
listening: boolean;
/**
* Checks if a route with a given name exists
*
* @param name - Name of the route to check
*/
hasRoute(name: NonNullable<RouteRecordNameGeneric>): boolean;
/**
* Get a full list of all the {@link RouteRecord | route records}.
*/
getRoutes(): TRecord[];
/**
* Returns the {@link RouteLocation | normalized version} of a
* {@li