Vue Router

https://router.vuejs.org/
Admin
Vue Router is the official client-side routing solution for Vue that enables navigation between...
Tokens:129,126
Snippets:1,503
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### RouterHistory go method example

Source: https://router.vuejs.org/api/interfaces/RouterHistory.html

JavaScript example showing how to use the go method to navigate back and forward, equivalent to window.history.back() and window.history.forward().

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

--------------------------------

### Example of createRouter with history

Source: https://router.vuejs.org/api/interfaces/RouterOptions.html

Shows how to initialize a router with `createWebHistory`.

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

--------------------------------

### createWebHashHistory usage examples

Source: https://router.vuejs.org/api/functions/createwebhashhistory

JavaScript examples showing how different base values affect the resulting URL. The examples assume the page is at https://example.com/folder and file:///usr/etc/folder/index.html. Note that if the base includes a '#', it won't be added again, and for file:// locations the base is ignored.

```js
// at https://example.com/folder
createWebHashHistory() // gives a url of `https://example.com/folder#`
createWebHashHistory('/folder/') // gives a url of `https://example.com/folder/#`
// if the `#` is provided in the base, it won't be added by `createWebHashHistory`
createWebHashHistory('/folder/#/app/') // gives a url of `https://example.com/folder/#/app/`
// you should avoid doing this because it changes the original url and breaks copying urls
createWebHashHistory('/other-folder/') // gives a url of `https://example.com/other-folder/#`

// at file:///usr/etc/folder/index.html
// for locations with no `host`, the base is ignored
createWebHashHistory('/iAmIgnored') // gives a url of `file:///usr/etc/folder/index.html#`
```

--------------------------------

### install() TypeScript signature

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

TypeScript signature for install method. Called automatically by app.use(router). Should not be called manually. Triggers initial navigation on client side.

```ts
install(app): void;
```

--------------------------------

### Create a new project with create-vue (npm, yarn, pnpm, bun)

Source: https://router.vuejs.org/installation

Scaffold a new Vite-based project with create-vue. You will be prompted with questions about the project type; choosing to install Vue Router includes an example application demonstrating core features.

```bash
npm create vue@latest
```

```bash
yarn create vue
```

```bash
pnpm create vue
```

```bash
bun create vue
```

--------------------------------

### Suspense alternative with await in setup()

Source: https://router.vuejs.org/data-loaders/rfc.html

Shows the Suspense alternative for data fetching, where `await` is used directly in `setup()`. This approach has limitations and is not viable for data fetching according to the documentation.

```vue
<!-- src/pages/users.vue = /users -->
<!-- Displays a list of all users -->
<script setup>
const userList = shallowRef(await fetchUserList())

// manually expose a reload function to be called whenever needed
function reload() {
  userList.value = await fetchUserList()
}
</script>
```

--------------------------------

### Example of using qs package for parseQuery and stringifyQuery

Source: https://router.vuejs.org/api/interfaces/RouterOptions.html

Shows how to provide both `parseQuery` and `stringifyQuery` using the qs package.

```javascript
import qs from 'qs'

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

--------------------------------

### User component with $route.params and route config

Source: https://router.vuejs.org/guide/essentials/passing-props

Initial example showing a component tightly coupled to the route via $route.params.id, and the corresponding route configuration that passes the id param. This is the starting point before decoupling with props.

```vue
<template>
  <div>User {{ $route.params.id }}</div>
</template>
```

```js
import User from './User.vue'

// these are passed to `createRouter`
const routes = [{ path: '/users/:id', component: User }]
```

--------------------------------

### install() method signature

Source: https://router.vuejs.org/api/interfaces/routerclassic

Called automatically by app.use(router). Should not be called manually. Triggers the initial navigation on the client side. Inherited from EXPERIMENTAL_Router_Base.

```ts
install(app): void;
```

```ts
EXPERIMENTAL_Router_Base.install
```

--------------------------------

### install(app)

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

Called automatically by `app.use(router)`. Should not be called manually by the user. This will trigger the initial navigation when on client side.

```APIDOC
## install(app)

### Description
Called automatically by `app.use(router)`. Should not be called manually by the user. This will trigger the initial navigation when on client side.

### Method
install

### Signature
`install(app): void;`

### Parameters
- **app** (`App`) - Required - Application that uses the router.

### Returns
- `void`

### Inherited From
`EXPERIMENTAL_Router_Base.install`
```

--------------------------------

### install inherited from marker

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

Inherited from marker for install, indicating it is inherited from EXPERIMENTAL_Router_Base.

```ts
EXPERIMENTAL_Router_Base.install
```

--------------------------------

### Install ScrollRestoration plugin in main.ts

Source: https://router.vuejs.org/experimental/scroll-restoration

Install the ScrollRestoration plugin before the router with default capture and restore functions. The `key` option is commented out, showing the default path + hash behavior.

```ts
import { createApp } from 'vue'
import {
  ScrollRestoration,
  SCROLL_RESTORATION_CAPTURE_DEFAULT,
  SCROLL_RESTORATION_RESTORE_DEFAULT,
} from 'vue-router/experimental'
import App from './App.vue'
import { router } from './router'

const app = createApp(App)

app.use(ScrollRestoration, {
  router,
  // default value, not needed
  // key: to => to.path + to.hash,
  capture: SCROLL_RESTORATION_CAPTURE_DEFAULT,
  restore: SCROLL_RESTORATION_RESTORE_DEFAULT,
})
app.use(router)

app.mount('#app')
```

--------------------------------

### Good example: calling next exactly once in router.beforeEach

Source: https://router.vuejs.org/guide/advanced/navigation-guards

Correct usage of the optional third argument 'next'. The else branch ensures next is called exactly once per logical path. This avoids the double-call problem shown in the bad example.

```javascript
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})
```

--------------------------------

### Create router with a single route

Source: https://router.vuejs.org/guide/advanced/dynamic-routing

Initial router setup with a catch-all route that renders the Article component for any path.

```javascript
const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})
```

--------------------------------

### Install Vue Router with npm, yarn, pnpm, bun, or deno

Source: https://router.vuejs.org/installation

Install Vue Router from the npm registry using your preferred JavaScript package manager. Choose the command that matches your package manager.

```bash
npm install vue-router
```

```bash
yarn add vue-router
```

```bash
pnpm add vue-router
```

```bash
bun add vue-router
```

```bash
deno add vue-router
```

--------------------------------

### From scratch: main.ts and index.vue

Source: https://router.vuejs.org/file-based-routing

From-scratch setup: main.ts imports routes from vue-router/auto-routes and passes them to createRouter, and the index.vue component renders the home page at '/'. The component is a minimal Vue template with an h1 heading.

```ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

createApp(App)
  .use(router)
  .mount('#app')
```

```vue
<template>
  <h1>Home</h1>
</template>
```

--------------------------------

### Use vite-plugin-vue-layouts with setupLayouts

Source: https://router.vuejs.org/file-based-routing/extending-routes

Wrap the auto-generated routes with `setupLayouts` from `virtual:generated-layouts` to integrate layout plugin. This is an example of runtime route extension.

```ts
import { createRouter } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
import { setupLayouts } from 'virtual:generated-layouts'

const router = createRouter({
  // ...
  routes: setupLayouts(routes),
})
```

--------------------------------

### Initial App.vue, User.vue, and routes array

Source: https://router.vuejs.org/guide/essentials/nested-routes

Initial setup from the previous chapter: App.vue contains a top-level <router-view>, User.vue displays the user ID from the route params, and the routes array maps '/user/:id' to the User component.

```vue
<template>
  <router-view />
</template>
```

```vue
<template>
  <div>User {{ $route.params.id }}</div>
</template>
```

```js
import User from './User.vue'

// these are passed to `createRouter`
const routes = [{ path: '/user/:id', component: User }]
```

--------------------------------

### defineBasicLoader() example with Vue component

Source: https://router.vuejs.org/data-loaders/basic

Complete example of using defineBasicLoader in a Vue component. It defines a loader that fetches user data based on the route parameter, with a key for SSR. The component uses the loader's returned state (user, error, isLoading, reload) and provides controls to refetch and navigate between users.

```vue
<script lang="ts">
import { defineBasicLoader } from 'vue-router/experimental'
import { getUserById } from '../api'

export const useUserData = defineBasicLoader(
  (to, { signal }) => {
    return getUserById(to.params.id, { signal })
  },
  {
    // used for SSR only
    key: 'user-data',
  }
)
</script>

<script lang="ts" setup>
const route = useRoute('/users/[id]')

const {
  user,
  error
  isLoading,
  reload,
} = useUserData()
</script>

<template>
  <main>
    <h1>Basic Data Loader Example</h1>
    <pre>User: {{ route.params.id }}</pre>

    <fieldset>
      <legend>Controls</legend>

      <button @click="reload()">Refetch</button>
    </fieldset>

    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 - 1 } }"
      >Previous</RouterLink
    >
    |
    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 + 1 } }"
      >Next</RouterLink
    >

    <h2>State</h2>

    <p>
      <code>isLoading: {{ isLoading }}</code>
    </p>
    <pre v-if="error">Error: {{ error }}</pre>
    <pre v-else>{{ user == null ? String(user) : user }}</pre>
  </main>
</template>
```

--------------------------------

### Array of beforeEnter Guards for Reuse

Source: https://router.vuejs.org/guide/advanced/navigation-guards

Shows how to pass an array of functions to `beforeEnter` to reuse guards across routes. The example defines `removeQueryParams` and `removeHash` and applies them to different routes.

```js
function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]
```

--------------------------------

### createWebHashHistory()

Source: https://router.vuejs.org/api/functions/createWebHashHistory.html

Documentation for the createWebHashHistory() function from Vue Router, including its signature, parameters, return type, and usage examples.

```APIDOC
## createWebHashHistory()

### Description
Creates a hash history for Vue Router. Useful for web applications with no host (e.g., `file://`) or when configuring a server to handle any URL is not possible.

### Signature
```ts
function createWebHashHistory(base?): RouterHistory;
```

### Parameters
- **base?** (`string`) - Optional base to provide. Defaults to `location.pathname + location.search`. If there is a `<base>` tag in the `head`, its value will be ignored in favor of this parameter, but note it affects all the `history.pushState()` calls, meaning that if you use a `<base>` tag, its `href` value has to match this parameter (ignoring anything after the `#`).

### Returns
- `RouterHistory` - The created hash history object.

### Example
```js
// at https://example.com/folder
createWebHashHistory() // gives a url of `https://example.com/folder#`
createWebHashHistory('/folder/') // gives a url of `https://example.com/folder/#`
// if the `#` is provided in the base, it won't be added by `createWebHashHistory`
createWebHashHistory('/folder/#/app/') // gives a url of `https://example.com/folder/#/app/`
// you should avoid doing this because it changes the original url and breaks copying urls
createWebHashHistory('/other-folder/') // gives a url of `https://example.com/other-folder/#`

// at file:///usr/etc/folder/index.html
// for locations with no `host`, the base is ignored
createWebHashHistory('/iAmIgnored') // gives a url of `file:///usr/etc/folder/index.html#`
```
```

--------------------------------

### Access Router and Route with useRouter and useRoute

Source: https://router.vuejs.org/guide/advanced/composition-api

Use useRouter and useRoute inside setup to access the router and current route. The route object is reactive; avoid watching the whole route object.

```vue
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

function pushWithQuery(query) {
  router.push({
    name: 'search',
    query: {
      ...route.query,
      ...query,
    },
  })
}
</script>
```

--------------------------------

### Nested routes for exact active link example

Source: https://router.vuejs.org/guide/essentials/active-links.html

Defines nested routes with a parent /user/:username and a child role/:roleId. Used to illustrate the difference between active and exact active links.

```javascript
const routes = [
  {
    path: '/user/:username',
    component: User,
    children: [
      {
        path: 'role/:roleId',
        component: Role,
      },
    ],
  },
]
```

--------------------------------

### URL encoding with router.push and params

Source: https://router.vuejs.org/guide/essentials/navigation.html

Demonstrates how to handle URL encoding when building paths with dynamic segments. Use encodeURIComponent for each segment, or prefer name and params to get automatic encoding. Note that params are ignored when a path is provided.

```javascript
const username = 'eduardo/san martin'
// we can manually build the url but we will have to handle the encoding ourselves
router.push(`/user/${encodeURIComponent(username)}`) // -> /user/eduardo%2Fsan%20martin
// same as
router.push({ path: `/user/${encodeURIComponent(username)}` }) // -> /user/eduardo%2Fsan%20martin
// if possible use `name` and `params` to benefit from automatic URL encoding
router.push({ name: 'user', params: { username } }) // -> /user/eduardo%2Fsan%20martin
// `params` cannot be used alongside `path`
router.push({ path: '/user', params: { username } }) // -> /user
```

--------------------------------

### Vue component using defineColadaLoader with getUserById

Source: https://router.vuejs.org/data-loaders/colada

Full Vue component example showing how to define a loader with defineColadaLoader, use it in a setup script, and display state with controls for refresh and reload. The loader uses a query function that calls getUserById with the route params and a signal, and sets a staleTime of 10000 ms to keep data fresh for 10 seconds.

```vue
<script lang="ts">
import { defineColadaLoader } from 'vue-router/experimental/pinia-colada'
import { getUserById } from '../api'

export const useUserData = defineColadaLoader({
  async query(to, { signal }) {
    return getUserById(to.params.id, { signal })
  },
  key: to => ['users', to.params.id],
  // Keep the data "fresh" 10 seconds to avoid fetching the same data too often
  staleTime: 10000,
})
</script>

<script lang="ts" setup>
const route = useRoute('/users/[id]')

const {
  user,
  status,
  error
  isLoading,
  reload,
  refresh,
} = useUserData()
</script>

<template>
  <main>
    <h1>Pinia Colada Loader Example</h1>
    <pre>User: {{ route.params.id }}</pre>

    <fieldset>
      <legend>Controls</legend>

      <button @click="refresh()">Refresh</button>
      <button @click="reload()">Refetch</button>
    </fieldset>

    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 - 1 } }">
      Previous
    </RouterLink>
    |
    <RouterLink :to="{ params: { id: Number(route.params.id) || 0 + 1 } }">
      Next
    </RouterLink>

    <h2>State</h2>

    <p>
      <code>status: {{ status }}</code>
      <br />
      <code>isLoading: {{ isLoading }}</code>
    </p>
    <pre v-if="error">Error: {{ error }}</pre>
    <pre v-else>{{ user == null ? String(user) : user }}</pre>
  </main>
</template>
```

--------------------------------

### Await initial navigation with router.isReady()

Source: https://router.vuejs.org/guide/advanced/transitions

Mount the app after the initial navigation is ready to avoid transitions being applied on initial load. Use await router.isReady() before app.mount().

```ts
const app = createApp(App)
app.use(router)

// mount after the initial navigation is ready
await router.isReady()
app.mount('#app')
```

--------------------------------

### Install DataLoaderPlugin before router

Source: https://router.vuejs.org/experimental/router-resolver

Installs the DataLoaderPlugin before the router when using Data Loaders. The plugin must be registered before the router to work correctly.

```ts
import { DataLoaderPlugin } from 'vue-router/experimental'

app.use(DataLoaderPlugin, { router })
app.use(router)
```

--------------------------------

### beforeResolve() usage example

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

Example usage of beforeResolve to check authentication. If the route requires auth and the user is not authenticated, the guard returns false to cancel navigation.

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

--------------------------------

### Create router with createWebHistory()

Source: https://router.vuejs.org/guide/essentials/history-mode.html

Use this to enable HTML5 history mode, which produces normal URLs like https://example.com/user/id. Requires a server catch-all fallback to serve index.html for unmatched routes to avoid 404 errors.

```javascript
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})
```

--------------------------------

### Set up experimental router and register RouterLink/RouterView

Source: https://router.vuejs.org/experimental/router-resolver

Sets up the experimental router with file-based routing and registers the missing RouterLink and RouterView components globally. The first block creates the router using the resolver and enables hot updates in development. The second block is required because the experimental router does not add these components automatically.

```ts
// src/router/index.ts
import { createWebHistory } from 'vue-router'
import { experimental_createRouter as createRouter } from 'vue-router/experimental'
import { resolver, handleHotUpdate } from 'vue-router/auto-resolver'

export const router = createRouter({
  history: createWebHistory(),
  resolver,
})

if (import.meta.hot) {
  handleHotUpdate(router)
}
```

```ts
// src/main.ts
import { createApp } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import App from './App.vue'
import { router } from './router'

const app = createApp(App)
app.component('RouterLink', RouterLink)
app.component('RouterView', RouterView)
app.use(router)
app.mount('#app')
```

--------------------------------

### afterEach navigation guard example

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

Example of using the afterEach navigation guard to log navigation failures. The guard receives (to, from, failure) and checks if the navigation failed using isNavigationFailure.

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

--------------------------------

### JavaScript example using isNavigationFailure in router.afterEach

Source: https://router.vuejs.org/api/functions/isnavigationfailure

Example showing how to use isNavigationFailure to detect any navigation failure, duplicated navigations, and aborted or canceled navigations. Uses NavigationFailureType constants.

```javascript
import { isNavigationFailure, NavigationFailureType } from 'vue-router'

router.afterEach((to, from, failure) => {
  // Any kind of navigation failure
  if (isNavigationFailure(failure)) {
    // ...
  }
  // Only duplicated navigations
  if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
    // ...
  }
  // Aborted or canceled navigations
  if (isNavigationFailure(failure, NavigationFailureType.aborted | NavigationFailureType.cancelled )) {
    // ...
  }
})
```

--------------------------------

### Register the router plugin with use()

Source: https://router.vuejs.org/guide

Registers the router instance as a plugin on the app. The call to use() must happen before mount(). Two equivalent forms are shown: chaining and separate statements.

```js
createApp(App).use(router).mount('#app')
```

```js
const app = createApp(App)
app.use(router)
app.mount('#app')
```

--------------------------------

### beforeResolve() guard and example

Source: https://router.vuejs.org/api/interfaces/routerclassic

Adds a navigation guard that executes before navigation is resolved. The example shows a guard that returns false when authentication is required but the user is not authenticated. The method returns a function that removes the registered guard.

```ts
beforeResolve(guard): () => void;
```

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

```ts
EXPERIMENTAL_Router_Base.beforeResolve
```

--------------------------------

### Caddy v2 try_files for history mode

Source: https://router.vuejs.org/guide/essentials/history-mode.html

Caddy v2 configuration to serve index.html for all paths.

```caddy
try_files {path} /
```

--------------------------------

### RouterOptions

Source: https://router.vuejs.org/api/interfaces/routeroptions

Options to initialize a Router instance. This interface extends EXPERIMENTAL_RouterOptions_Base and includes properties for history, routes, link classes, query parsing/stringification, path matching options, and scroll behavior.

```APIDOC
## RouterOptions

### Description
Options to initialize a Router instance.

### Extends
- `EXPERIMENTAL_RouterOptions_Base`

### Properties

#### `end?`
- Type: `boolean`
- Optional: Yes
- Default: `true`
- Deprecated: This option will always be `true` in the future. Open a discussion in vuejs/router if you need this to be `false`.
- Description: Should the RegExp match until the end by appending a `$` to it.
- Inherited from: `_PathParserOptions`.`end`

#### `history`
- Type: `RouterHistory`
- Required: Yes
- Description: 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...
})
```
- Inherited from: `EXPERIMENTAL_RouterOptions_Base.history`

#### `linkActiveClass?`
- Type: `string`
- Optional: Yes
- Description: Default class applied to active RouterLink. If none is provided, `router-link-active` will be applied.
- Inherited from: `EXPERIMENTAL_RouterOptions_Base.linkActiveClass`

#### `linkExactActiveClass?`
- Type: `string`
- Optional: Yes
- Description: 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?`
- Type: `RouterMatcher`
- Optional: Yes
- Deprecated: This is only exposed for Nuxt, it's replaced in the upcoming router by the `resolver` option.
- Description: **`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

#### `parseQuery?`
- Type: `(search) => LocationQuery`
- Optional: Yes
- Description: 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:
```js
import qs from 'qs'

createRouter({
  // other options...
  parseQuery: qs.parse,
  stringifyQuery: qs.stringify,
})
```
- Inherited from: `EXPERIMENTAL_RouterOptions_Base.parseQuery`

#### `routes`
- Type: `readonly RouteRecordRaw[]`
- Required: Yes
- Description: Initial list of routes that should be added to the router.

#### `scrollBehavior?`
- Type: `RouterScrollBehavior`
- Optional: Yes
- Deprecated: Use `ScrollRestoration` and `useScrollRestoration()` from `vue-router/experimental` instead. See the migration guide.
- Description: Function to control scrolling when navigating between pages. Can return a Promise to delay scrolling.
- See: RouterScrollBehavior.
- Example:
```js
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?`
- Type: `boolean`
- Optional: Yes
- Default: `false`
- Description: Makes the RegExp case-sensitive.
- Inherited from: `_PathParserOptions`.`sensitive`

#### `strict?`
- Type: `boolean`
- Optional: Yes
- Default: `false`
- Description: Whether to disallow a trailing slash or not.
- Inherited from: `_PathParserOptions`.`strict`

#### `stringifyQuery?`
- Type: `(query) => string`
- Optional: Yes
- Description: 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`
```

--------------------------------

### getRoutes()

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

Gets a full list of all the route records.

```APIDOC
## getRoutes()

### Description
Get a full list of all the route records.

### Method
getRoutes

### Signature
`getRoutes(): RouteRecordNormalized[];`

### Returns
- `RouteRecordNormalized[]` - Array of route records.

### Inherited From
`EXPERIMENTAL_Router_Base.getRoutes`
```

--------------------------------

### Manipulate routes with ViteSSG (Vitesse starter)

Source: https://router.vuejs.org/file-based-routing

Example from Vitesse starter showing how to pass the auto-generated routes to a plugin (ViteSSG) while noting that changes made to routes at runtime will not be reflected in types. It imports routes from vue-router/auto-routes and also uses setupLayouts from virtual:generated-layouts.

```ts
import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import App from './App.vue'
import type { UserModule } from './types'
import generatedRoutes from '~pages'
import { routes } from 'vue-router/auto-routes'

import '@unocss/reset/tailwind.css'
import './styles/main.css'
import 'uno.css'

const routes = setupLayouts(generatedRoutes) 

// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
  App,
  {
    routes, 
    routes: setupLayouts(routes), 
    base: import.meta.env.BASE_URL,
  },
  ctx => {
    // install all modules under `modules/`
    Object.values(
      import.meta.glob<{ install: UserModule }>('./modules/*.ts', {
        eager: true,
      })
    ).forEach(i => i.install?.(ctx))
  }
)
```

--------------------------------

### Bad example: calling next twice in router.beforeEach

Source: https://router.vuejs.org/guide/advanced/navigation-guards

Incorrect usage of the optional third argument 'next'. Calling next() unconditionally after a conditional next() can call next twice on the same logical path, causing the hook to never resolve or produce errors. This is a bad example.

```javascript
// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // if the user is not authenticated, `next` is called twice
  next()
})
```

--------------------------------

### Define catch-all and custom regex routes

Source: https://router.vuejs.org/guide/essentials/dynamic-matching

Shows how to define a catch-all route using `/:pathMatch(.*)*` and a custom regex route `/user-:afterUser(.*)`. The catch-all route captures everything under `route.params.pathMatch`.

```JavaScript
const routes = [
  // will match everything and put it under `route.params.pathMatch`
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // will match anything starting with `/user-` and put it under `route.params.afterUser`
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]
```

--------------------------------

### getRoutes() method signature

Source: https://router.vuejs.org/api/interfaces/routerclassic

Gets a full list of all route records. Inherited from EXPERIMENTAL_Router_Base.

```ts
getRoutes(): RouteRecordNormalized[];
```

```ts
EXPERIMENTAL_Router_Base.getRoutes
```

--------------------------------

### Example of scrollBehavior function

Source: https://router.vuejs.org/api/interfaces/RouterOptions.html

Shows the signature of a scrollBehavior function. `to` and `from` are route locations, `savedPosition` can be null.

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

--------------------------------

### Errors

Source: https://router.vuejs.org/experimental/param-parsers.html

Error handling for param parsers. Throw any error from `get` to mark the value as invalid.

```APIDOC
## Errors

### Description
Throw any error from `get` to mark the value as not matching. The router skips the route (treat it like a 404 candidate). `miss(reason?)` is just sugar for throwing a typed error.

### Usage
```ts
import { miss } from 'vue-router/experimental'

// inside get
miss(`"${value}" is not a number`)
```
```

--------------------------------

### string

Source: https://router.vuejs.org/guide/essentials/named-views

string

```template
<router-view name="sidebar" />
<router-view />
<router-view name="footer" />
```

--------------------------------

### Navigate to a catch-all route with params

Source: https://router.vuejs.org/guide/essentials/dynamic-matching

Shows how to programmatically navigate to a catch-all route by passing `pathMatch` as an array of path segments. Preserves query and hash.

```JavaScript
router.push({
  name: 'NotFound',
  // preserve current path and remove the first char to avoid the target URL starting with `//`
  params: { pathMatch: route.path.substring(1).split('/') },
  // preserve existing query and hash if any
  query: route.query,
  hash: route.hash,
})
```

--------------------------------

### createWebHistory()

Source: https://router.vuejs.org/api/functions/createwebhistory

Documentation for the createWebHistory function from Vue Router.

```APIDOC
## createWebHistory()

### Description
Creates an HTML5 history. Most common history for single page applications.

### Method
N/A (Function)

### Endpoint
N/A

### Parameters
#### Optional Parameters
- **base** (string) - Optional - The base URL for the application.

### Returns
- **RouterHistory** - The HTML5 history instance.

### Example
```ts
import { createWebHistory } from 'vue-router'

const history = createWebHistory()
```
```

--------------------------------

### Migrate existing project: router.ts and main.ts

Source: https://router.vuejs.org/file-based-routing

Migration example: a router configuration using vue-router/auto-routes with explicit routes and hot update handling, plus the main.ts that mounts the app with the router. The router file includes a commented line about updating routes at runtime without reloading.

```ts
import { createRouter, createWebHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHistory(),
  routes: [ 
    { 
      path: '/', 
      component: () => import('src/pages/Home.vue'), 
    }, 
    { 
      path: '/users/:id', 
      component: () => import('src/pages/User.vue'), 
    } 
    { 
      path: '/about', 
      component: () => import('src/pages/About.vue'), 
    }, 
  ] 
  routes, 
})

// This will update routes at runtime without reloading the page
if (import.meta.hot) { 
  handleHotUpdate(router) 
} 
```

```ts
import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')
```

--------------------------------

### Access failure.to and failure.from properties

Source: https://router.vuejs.org/guide/advanced/navigation-failures

Shows how to access the to and from properties of a navigation failure to get the target and current locations.

```javascript
// trying to access the admin page
router.push('/admin').then(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
    failure.to.path // '/admin'
    failure.from.path // '/'
  }
})
```

--------------------------------

### RouterLink examples for active and exact active

Source: https://router.vuejs.org/guide/essentials/active-links.html

Two RouterLink components. At /user/erina/role/admin, both are active (router-link-active), but only the second is exact (router-link-exact-active).

```html
<RouterLink to="/user/erina">
  User
</RouterLink>
<RouterLink to="/user/erina/role/admin">
  Role
</RouterLink>
```

--------------------------------

### Define catch-all routes with /:pathMatch(.*)*

Source: https://router.vuejs.org/guide/migration/index.html

Catch-all routes (`*`, `/*`) must now be defined using a parameter with a custom regex. The last `*` makes the param repeated, which is necessary for direct navigation by name; omitting it encodes `/` in params.

```javascript
const routes = [
  // pathMatch is the name of the param, e.g., going to /not/found yields
  // { params: { pathMatch: ['not', 'found'] }}
  // this is thanks to the last *, meaning repeated params and it is necessary if you
  // plan on directly navigating to the not-found route using its name
  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
  // if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
  { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
]
// bad example if using named routes:
router.resolve({
  name: 'bad-not-found',
  params: { pathMatch: 'not/found' },
}).href // '/not%2Ffound'
// good example:
router.resolve({
  name: 'not-found',
  params: { pathMatch: ['not', 'found'] },
}).href // '/not/found'
```

--------------------------------

### Use createWebHistory() for history mode

Source: https://router.vuejs.org/guide/migration/index.html

Shows the new `history` option replacing the old `mode` option. Use `createWebHistory()` for `mode: 'history'`, `createWebHashHistory()` for `mode: 'hash'`, and `createMemoryHistory()` for `mode: 'abstract'`.

```javascript
import { createRouter, createWebHistory } from 'vue-router'
// there is also createWebHashHistory and createMemoryHistory

createRouter({
  history: createWebHistory(),
  routes: [],
})
```

--------------------------------

### IIS web.config for history mode

Source: https://router.vuejs.org/guide/essentials/history-mode.html

IIS configuration using URL Rewrite to handle history mode and custom 404/500. Requires IIS UrlRewrite installed.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
```

--------------------------------

### Slow regex example with repeatable `.*`

Source: https://router.vuejs.org/guide/essentials/route-matching-syntax

Avoid this pattern: a greedy `.*` followed by a repeatable modifier `*` and a static string creates a very slow regex that can cause serious performance issues.

```ts
const routes = [
  // This creates a very slow regex because of the greedy `.*` followed by `*` and a static string
  { path: '/:pathMatch(.*)*/something-at-the-end' },
]
```

--------------------------------

### isReady()

Source: https://router.vuejs.org/api/interfaces/RouterClassic.html

Returns a Promise that resolves when the router has completed the initial navigation. Useful for server-side rendering.

```APIDOC
## isReady()

### Description
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
isReady

### Signature
`isReady(): Promise<void>;`

### Returns
- `Promise<void>` - Resolves when initial navigation is complete.

### Inherited From
`EXPERIMENTAL_Router_Base.isReady`
```

--------------------------------

### Wait for router readiness before mounting app

Source: https://router.vuejs.org/guide/migration/index.html

Wait for the router to be ready before mounting the app to avoid an initial transition. On server side, manually push the initial location.

```js
app.use(router)
// Note: on Server Side, you need to manually push the initial location
router.isReady().then(() => app.mount('#app'))
```

--------------------------------

### Fast regex example with non-repeatable `.*` at end

Source: https://router.vuejs.org/guide/essentials/route-matching-syntax

Use this pattern instead: place the `.*` at the very end of the URL and do not make it repeatable. It matches the same routes but without an array of params and is much faster.

```ts
const routes = [
  // This is fine because the `.*` is at the end
  { path: '/:pathMatch(.*)/something-at-the-end' },
]
```
Tokens:
Raw