vue-router / RouterOptions

RouterOptions

Options to initialize a Router instance.

Extends

• EXPERIMENTAL_RouterOptions_Base

Properties

end?

optional end?: 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

Default Value

true

Inherited from

_PathParserOptions.end

---

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

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

Inherited from

EXPERIMENTAL_RouterOptions_Base.history

---

linkActiveClass?

optional linkActiveClass?: string;

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

Inherited from

EXPERIMENTAL_RouterOptions_Base.linkActiveClass

---

linkExactActiveClass?

optional linkExactActiveClass?: string;

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

Inherited from

EXPERIMENTAL_RouterOptions_Base.linkExactActiveClass

---

matcher?

optional matcher?: RouterMatcher;

Internal

Allows Nuxt and SSR apps to pass a prebuilt matcher created with createRouterMatcher. Sharing a matcher between routers is only safe when no router mutates it (e.g. via addRoute).

for Nuxt only

Deprecated

This is only exposed for Nuxt, it's replaced in the upcoming router by the resolver option

---

parseQuery?

optional parseQuery?: (search) => LocationQuery;

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

Internal

Transforms a queryString into a 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.

Parameters

search

string

search string to parse

Returns

LocationQuery

a query object

Example

Let's say you want to use the qs package to parse queries, you can provide both parseQuery and stringifyQuery:

import qs from 'qs'

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

Inherited from

EXPERIMENTAL_RouterOptions_Base.parseQuery

---

routes

routes: readonly RouteRecordRaw[];

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

---

scrollBehavior?

optional scrollBehavior?: RouterScrollBehavior;

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

See

RouterScrollBehavior.

Example

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

Inherited from

EXPERIMENTAL_RouterOptions_Base.scrollBehavior

---

sensitive?

optional sensitive?: boolean;

Makes the RegExp case-sensitive.

Default Value

false

Inherited from

_PathParserOptions.sensitive

---

strict?

optional strict?: boolean;

Whether to disallow a trailing slash or not.

Default Value

false

Inherited from

_PathParserOptions.strict

---

stringifyQuery?

optional stringifyQuery?: (query) => string;

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

Internal

Stringifies a LocationQueryRaw object. Like URLSearchParams, it doesn't prepend a ?

Parameters

query

LocationQueryRaw | undefined

query object to stringify

Returns

string

string version of the query without the leading ?

Inherited from

EXPERIMENTAL_RouterOptions_Base.stringifyQuery