vue-router

index signature

[x: number]: HistoryStateValue;

index signature

[x: string]: HistoryStateValue;

property matched

matched: RouteRecord[];

• Array of RouteRecord containing components as they were passed when adding records. It can also contain redirect records. This can't be used directly

property meta

meta: RouteMeta;

• Merged meta properties from all the matched route records.

property name

name: RouteRecordNameGeneric | null | undefined;

• Name of the matched record

property params

params: RouteParamsGeneric;

• Object of decoded params extracted from the path.

property path

path: string;

• Percentage encoded pathname section of the URL.

property from

from: RouteLocationNormalized;

• Route location we were navigating from

property to

to: RouteLocationNormalized;

• Route location we were navigating to

property type

type:
    | ErrorTypes.NAVIGATION_CANCELLED
    | ErrorTypes.NAVIGATION_ABORTED
    | ErrorTypes.NAVIGATION_DUPLICATED;

• Type of the navigation. One of NavigationFailureType

call signature

(
    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<NavigationGuardReturn>;

call signature

(): void;

call signature

(error: Error): void;

call signature

(location: RouteLocationRaw): void;

call signature

(valid: boolean | undefined): void;

call signature

(cb: NavigationGuardNextCallback): void;

call signature

(
    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<NavigationGuardReturn>;

call signature

(
    to: RouteLocationNormalizedLoaded,
    from: RouteLocationNormalizedLoaded,
    failure?: NavigationFailure | void
): unknown;

property path

path: string;

• Percentage encoded pathname section of the URL.

property path

path: _LiteralUnion<RouteMap[Name]['path']>;

property name

name?: RouteRecordNameGeneric;

property params

params?: RouteParamsRawGeneric;

property path

path?: undefined;

• A relative path to the current location. This property should be removed

property name

name?: Extract<Name, string | symbol>;

property params

params?: RouteMap[Name]['paramsRaw'];

property matched

matched: RouteRecord[];

• Array of 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**.

property components

components: Record<string, RouteComponent> | null | undefined;

property matched

matched: RouteRecordNormalized[];

• Array of RouteRecordNormalized

property name

name: RouteRecordNameGeneric;

property matched

matched: RouteLocationMatched[];

• Array of 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**.

property name

name: Extract<Name, string | symbol>;

property params

params: RouteMap[Name]['params'];

property matched

matched: RouteRecordNormalized[];

• Array of RouteRecordNormalized

property name

name: Extract<Name, string | symbol>;

property params

params: RouteMap[Name]['params'];

property force

force?: boolean;

• Triggers the navigation even if the location is the same as the current one. Note this will also add a new entry to the history unless replace: true is passed.

property replace

replace?: boolean;

• Replace the entry in the history instead of pushing a new entry

property state

state?: HistoryState;

• State to save using the History API. This cannot contain any reactive values and some primitives like Symbols are forbidden. More info at https://developer.mozilla.org/en-US/docs/Web/API/History/state

property href

href: string;

• Resolved href for the route location that will be set on the <a href="...">.

property href

href: string;

• Resolved href for the route location that will be set on the <a href="...">.

property name

name: Extract<Name, string | symbol>;

property params

params: RouteMap[Name]['params'];

property options

readonly options: RouterOptions;

• Original options object passed to create the Router

method addRoute

addRoute: {
    (
        parentName: NonNullable<RouteRecordNameGeneric>,
        route: RouteRecordRaw
    ): () => void;
    (route: RouteRecordRaw): () => void;
};

• Add a new route record as the child of an existing route.

  Parameter parentName

  Parent Route Record where route should be appended at

  Parameter route

  Route Record to add

• Add a new route record to the router.

  Parameter route

  Route Record to add

method clearRoutes

clearRoutes: () => void;

• Delete all routes from the router.

method removeRoute

removeRoute: (name: NonNullable<RouteRecordNameGeneric>) => void;

• Remove an existing route by its name.

  Parameter name

  Name of the route to remove

property childrenNames

childrenNames: ChildrenNames;

property name

name: Name;

property params

params: Params;

property paramsRaw

paramsRaw: ParamsRaw;

property path

path: Path;

property children

children?: never;

property component

component?: never;

property components

components: Record<string, RawRouteComponent>;

• Components to display when the URL matches this route. Allow using named views.

property props

props?: Record<string, _RouteRecordProps> | boolean;

• Allow passing down params as props to the component rendered by router-view. Should be an object with the same keys as components or a boolean to be applied to every component.

property redirect

redirect?: never;

property children

children: RouteRecordRaw[];

property component

component?: never;

property components

components?: Record<string, RawRouteComponent> | null | undefined;

• Components to display when the URL matches this route. Allow using named views.

property props

props?: Record<string, _RouteRecordProps> | boolean;

• Allow passing down params as props to the component rendered by router-view. Should be an object with the same keys as components or a boolean to be applied to every component.

property aliasOf

aliasOf: RouteRecordNormalized | undefined;

• Defines if this record is the alias of another one. This property is undefined if the record is the original one.

property beforeEnter

beforeEnter: _RouteRecordBase['beforeEnter'];

• Registered beforeEnter guards

property children

children: RouteRecordRaw[];

• Nested route records.

property components

components: RouteRecordMultipleViews['components'] | null | undefined;

• See documentation for RouteRecordMultipleViews.components.

property instances

instances: Record<string, ComponentPublicInstance | undefined | null>;

• 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.

property meta

meta: Exclude<_RouteRecordBase['meta'], void>;

• See documentation for _RouteRecordBase.meta.

property name

name: _RouteRecordBase['name'];

• See documentation for _RouteRecordBase.name.

property path

path: _RouteRecordBase['path'];

• See documentation for _RouteRecordBase.path.

property props

props: Record<string, _RouteRecordProps>;

• See documentation for RouteRecordMultipleViews.props.

property redirect

redirect: _RouteRecordBase['redirect'] | undefined;

• See documentation for _RouteRecordBase.redirect.

property component

component?: never;

property components

components?: never;

property props

props?: never;

property redirect

redirect: RouteRecordRedirectOption;

property children

children?: never;

property component

component: RawRouteComponent;

• Component to display when the URL matches this route.

property components

components?: never;

property props

props?: _RouteRecordProps;

• Allow passing down params as props to the component rendered by router-view.

property redirect

redirect?: never;

property children

children: RouteRecordRaw[];

property component

component?: RawRouteComponent | null | undefined;

• Component to display when the URL matches this route.

property components

components?: never;

property props

props?: _RouteRecordProps;

• Allow passing down params as props to the component rendered by router-view.

property base

readonly base: string;

• 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

property location

readonly location: HistoryLocation;

• Current History location

property state

readonly state: HistoryState;

• Current History state

method createHref

createHref: (location: HistoryLocation) => string;

• Generates the corresponding href to be used in an anchor tag.

  Parameter location

  history location that should create an href

method destroy

destroy: () => void;

• Clears any event listener attached by the history implementation.

method go

go: (delta: number, triggerListeners?: boolean) => void;

• Traverses history in a given direction.

  Parameter 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.

  Parameter triggerListeners

  whether this should trigger listeners attached to the history

  Example 1

  myHistory.go(-1) // equivalent to window.history.back()
  myHistory.go(1) // equivalent to window.history.forward()

method listen

listen: (callback: NavigationCallback) => () => 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 RouterHistory.back and RouterHistory.forward

  Parameter callback

  listener to attach

  Returns

  a callback to remove the listener

method push

push: (to: HistoryLocation, data?: HistoryState) => void;

• Navigates to a location. In the case of an HTML5 History implementation, this will call history.pushState to effectively change the URL.

  Parameter to

  location to push

  Parameter data

  optional HistoryState to be associated with the navigation entry

method replace

replace: (to: HistoryLocation, data?: HistoryState) => void;

• Same as RouterHistory.push but performs a history.replaceState instead of history.pushState

  Parameter to

  location to set

  Parameter data

  optional HistoryState to be associated with the navigation entry

property activeClass

activeClass?: string;

• Class to apply when the link is active

property ariaCurrentValue

ariaCurrentValue?:
    | 'page'
    | 'step'
    | 'location'
    | 'date'
    | 'time'
    | 'true'
    | 'false';

• Value passed to the attribute aria-current when the link is exact active.

property custom

custom?: boolean;

• Whether RouterLink should not wrap its content in an a tag. Useful when using v-slot to create a custom RouterLink

property exactActiveClass

exactActiveClass?: string;

• Class to apply when the link is exact active

property viewTransition

viewTransition?: boolean;

• Pass the returned promise of router.push() to document.startViewTransition() if supported.

property routes

routes: Readonly<RouteRecordRaw[]>;

• Initial list of routes that should be added to the router.

call signature

(
    to: RouteLocationNormalized,
    from: RouteLocationNormalizedLoaded,
    savedPosition: _ScrollPositionNormalized | null
): Awaitable<ScrollPosition | false | void>;

• Parameter to

  Route location where we are navigating to

  Parameter from

  Route location where we are navigating from

  Parameter savedPosition

  saved position if it exists, null otherwise

property name

name?: string;

property route

route?: RouteLocationNormalized;

property replace

replace?: MaybeRef<boolean | undefined>;

property to

to: MaybeRef<
    | RouteLocationAsString
    | RouteLocationAsRelativeTyped<RouteMap, Name>
    | RouteLocationAsPath
    | RouteLocationRaw
>;

property viewTransition

viewTransition?: boolean;

• Pass the returned promise of router.push() to document.startViewTransition() if supported.

member aborted

aborted = 4

• An aborted navigation is a navigation that failed because a navigation guard returned false or called next(false)

member cancelled

cancelled = 8

• A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished).

member duplicated

duplicated = 16

• A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same location.