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,
    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,
    next: NavigationGuardNext
): _Awaitable<NavigationGuardReturn>;

call signature

(
    to: RouteLocationNormalized,
    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 params

params: RouteParamsGeneric;

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 currentRoute

readonly currentRoute: Ref<RouteLocationNormalizedLoaded>;

• Current RouteLocationNormalized

property listening

listening: boolean;

• Allows turning off the listening of history events. This is a low level api for micro-frontend.

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 afterEach

afterEach: (guard: NavigationHookAfter) => () => void;

• Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook.

  Parameter guard

  navigation hook to add

  Returns

  a function that removes the registered hook

  Example 1

  router.afterEach((to, from, failure) => {
    if (isNavigationFailure(failure)) {
      console.log('failed navigation', failure)
    }
  })

method back

back: () => ReturnType<Router['go']>;

• Go back in history if possible by calling history.back(). Equivalent to router.go(-1).

method beforeEach

beforeEach: (guard: NavigationGuardWithThis<undefined>) => () => void;

• Add a navigation guard that executes before any navigation. Returns a function that removes the registered guard.

  Parameter guard

  navigation guard to add

method beforeResolve

beforeResolve: (guard: NavigationGuardWithThis<undefined>) => () => void;

• Add a navigation guard that executes before navigation is about to be resolved. At this state all component have been fetched and other navigation guards have been successful. Returns a function that removes the registered guard.

  Parameter guard

  navigation guard to add

  Returns

  a function that removes the registered guard

  Example 1

  router.beforeResolve(to => {
    if (to.meta.requiresAuth && !isAuthenticated) return false
  })

method clearRoutes

clearRoutes: () => void;

• Delete all routes from the router matcher.

method forward

forward: () => ReturnType<Router['go']>;

• Go forward in history if possible by calling history.forward(). Equivalent to router.go(1).

method getRoutes

getRoutes: () => RouteRecord[];

• Get a full list of all the route records.

method go

go: (delta: number) => void;

• Allows you to move forward or backward through the history. Calls history.go().

  Parameter delta

  The position in the history to which you want to move, relative to the current page

method hasRoute

hasRoute: (name: NonNullable<RouteRecordNameGeneric>) => boolean;

• Checks if a route with a given name exists

  Parameter name

  Name of the route to check

method isReady

isReady: () => Promise<void>;

• Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route. If the initial navigation already happened, the promise resolves immediately.

  This is useful in server-side rendering to ensure consistent output on both the server and the client. Note that on server side, you need to manually push the initial location while on client side, the router automatically picks it up from the URL.

method onError

onError: (handler: _ErrorListener) => () => void;

• Adds an error handler that is called every time a non caught error happens during navigation. This includes errors thrown synchronously and asynchronously, errors returned or passed to next in any navigation guard, and errors occurred when trying to resolve an async component that is required to render a route.

  Parameter handler

  error handler to register

method push

push: (to: RouteLocationRaw) => Promise<NavigationFailure | void | undefined>;

• Programmatically navigate to a new URL by pushing an entry in the history stack.

  Parameter to

  Route location to navigate to

method removeRoute

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

• Remove an existing route by its name.

  Parameter name

  Name of the route to remove

method replace

replace: (to: RouteLocationRaw) => Promise<NavigationFailure | void | undefined>;

• Programmatically navigate to a new URL by replacing the current entry in the history stack.

  Parameter to

  Route location to navigate to

method resolve

resolve: {
    <Name extends string | symbol = string | symbol>(
        to: RouteLocationAsRelativeTyped<RouteMap, Name>,
        currentLocation?: RouteLocationNormalizedLoaded
    ): RouteLocationResolved<Name>;
    (
        to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric,
        currentLocation?: RouteLocationNormalizedLoadedGeneric
    ): RouteLocationResolvedGeneric;
};

• Returns the normalized version of a route location. Also includes an href property that includes any existing base. By default, the currentLocation used is router.currentRoute and should only be overridden in advanced use cases.

  Parameter to

  Raw route location to resolve

  Parameter currentLocation

  Optional current location to resolve against

property meta

meta: Meta;

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 history

history: RouterHistory;

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

  createRouter({
    history: createWebHistory(),
    // other options...
  })

property linkActiveClass

linkActiveClass?: string;

• Default class applied to active RouterLink. If none is provided, router-link-active will be applied.

property linkExactActiveClass

linkExactActiveClass?: string;

• Default class applied to exact active RouterLink. If none is provided, router-link-exact-active will be applied.

property parseQuery

parseQuery?: typeof parseQuery;

• Custom implementation to parse a query. See its counterpart, RouterOptions.stringifyQuery.

  Example 1

  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:

  import qs from 'qs'
  
  createRouter({
    // other options...
    parseQuery: qs.parse,
    stringifyQuery: qs.stringify,
  })

property routes

routes: Readonly<RouteRecordRaw[]>;

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

property scrollBehavior

scrollBehavior?: RouterScrollBehavior;

• Function to control scrolling when navigating between pages. Can return a Promise to delay scrolling. Check ScrollBehavior.

  Example 1

  function scrollBehavior(to, from, savedPosition) {
    // `to` and `from` are both route locations
    // `savedPosition` can be null if there isn't one
  }

property stringifyQuery

stringifyQuery?: typeof stringifyQuery;

• Custom implementation to stringify a query object. Should not prepend a leading ?. parseQuery counterpart to handle query parsing.

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.