API Documentation / Router

Interface: Router ​

Router instance.

Properties ​

currentRoute ​

• Readonly currentRoute: Ref<RouteLocationNormalizedLoaded>

Current RouteLocationNormalized

listening ​

• listening: boolean

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

options ​

• Readonly options: RouterOptions

Original options object passed to create the Router

Methods ​

addRoute ​

▸ addRoute(parentName, route): () => void

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

Parameters ​

Returns ​

fn

▸ (): void

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

Returns ​

void

▸ addRoute(route): () => void

Add a new route record to the router.

Parameters ​

Returns ​

fn

▸ (): void

Add a new route record to the router.

Returns ​

void

afterEach ​

▸ afterEach(guard): () => void

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

Example

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

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

Parameters ​

Returns ​

fn

▸ (): void

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

Example

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

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

Returns ​

void

back ​

▸ back(): void

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

Returns ​

void

beforeEach ​

▸ beforeEach(guard): () => void

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

Parameters ​

Returns ​

fn

▸ (): void

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

Returns ​

void

beforeResolve ​

▸ beforeResolve(guard): () => 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.

Example

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

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

Parameters ​

Returns ​

fn

▸ (): 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.

Example

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

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

Returns ​

void

forward ​

▸ forward(): void

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

Returns ​

void

getRoutes ​

▸ getRoutes(): RouteRecordNormalized[]

Get a full list of all the route records.

Returns ​

RouteRecordNormalized[]

go ​

▸ go(delta): void

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

Parameters ​

Returns ​

void

hasRoute ​

▸ hasRoute(name): boolean

Checks if a route with a given name exists

Parameters ​

Returns ​

boolean

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.

Returns ​

Promise<void>

onError ​

▸ onError(handler): () => 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.

Parameters ​

Returns ​

fn

▸ (): 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.

Returns ​

void

push ​

▸ push(to): Promise<undefined | void | NavigationFailure>

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

Parameters ​

Returns ​

Promise<undefined | void | NavigationFailure>

removeRoute ​

▸ removeRoute(name): void

Remove an existing route by its name.

Parameters ​

Returns ​

void

replace ​

▸ replace(to): Promise<undefined | void | NavigationFailure>

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

Parameters ​

Returns ​

Promise<undefined | void | NavigationFailure>

resolve ​

▸ resolve(to, currentLocation?): RouteLocation & { href: string }

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.

Parameters ​

Returns ​

RouteLocation & { href: string }