Vue Router

https://v3.router.vuejs.org/
Admin
Vue Router is the official router for Vue.js, deeply integrating with its core to simplify building...
Tokens:26,447
Snippets:304
Trust Score:10
Update:2 days ago
Show doc for...
Tokens:
Raw
### Install via CDN

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

Include the Vue Router script after the Vue script to enable automatic installation.

```html
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
```

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

### Install via npm

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

Use the npm package manager to install Vue Router in your project.

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

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

### Initialize Vue Router with Module System

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

When using a module system, you must explicitly install the router using Vue.use().

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
```

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

### router-link to prop usage

Source: https://v3.router.vuejs.org/api

Examples of using the to prop with strings, location objects, named routes, and query parameters.

```html
<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
<a href="home">Home</a>

<!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>

<!-- same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
  >Register</router-link
>
```

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

### router.push location arguments

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

Examples of using router.push with string paths, location descriptor objects, named routes, and query parameters.

```javascript
// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })
```

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

### router.go history navigation

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

Examples of using router.go to move forward or backward in the history stack by a specified number of steps.

```javascript
// go forward by one record, the same as history.forward()
router.go(1)

// go back by one record, the same as history.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records.
router.go(-100)
router.go(100)
```

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

### Install via Vue CLI

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

Add Vue Router as a plugin using the Vue CLI. Note that this command will overwrite your App.vue file.

```bash
vue add router
```

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

### Get matched components

Source: https://v3.router.vuejs.org/api

Signature for retrieving components matched by a location, useful for server-side data prefetching.

```javascript
const matchedComponents: Array<Component> = router.getMatchedComponents(location?)
```

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

### Coupling a component to $route

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

An example of a component tightly coupled to the router by accessing $route.params directly.

```javascript
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})
```

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

### router.push, router.replace, router.go, router.back, router.forward

Source: https://v3.router.vuejs.org/api

Programmatically navigate to a new URL. These functions can only be called after installing the Router plugin and passing it to the root Vue instance.

```APIDOC
## router.push, router.replace, router.go, router.back, router.forward

### Description
Programmatically navigate to a new URL. These functions can only be called after installing the Router plugin and passing it to the root Vue instance.

### Method
Function call

### Signatures
```
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()
```

### Parameters
- `location` (string | Location) - Required for push and replace - The target location.
- `onComplete` (Function) - Optional - Callback on successful navigation.
- `onAbort` (Function) - Optional - Callback on aborted navigation.
- `n` (number) - Required for go - The number of steps to go back or forward.

### Return Value
For push and replace, a Promise if no callbacks are provided.
```

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

### Correct usage of next in navigation guards

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

This example shows the correct implementation of a navigation guard where next is called exactly once per pass using an if-else structure.

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

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

### Get active route records

Source: https://v3.router.vuejs.org/api

Signature for retrieving the list of all active route records.

```javascript
getRoutes(): RouteRecord[]
```

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

### Incorrect usage of next in navigation guards

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

This example demonstrates a common mistake where the next function is called multiple times in overlapping logical paths, which prevents the hook from resolving correctly.

```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()
})
```

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

### Build from Source

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

Clone the repository and build the development version manually.

```bash
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
```

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

### Use router.START_LOCATION in navigation guards

Source: https://v3.router.vuejs.org/api

Demonstrates using router.START_LOCATION to identify the initial navigation within a beforeEach guard.

```javascript
import VueRouter from 'vue-router'

const router = new VueRouter({
  // ...
})

router.beforeEach((to, from) => {
  if (from === VueRouter.START_LOCATION) {
    // initial navigation
  }
})
```

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

### Define Catch-all or 404 Routes

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

Use an asterisk (*) to match any path. Place these routes at the end of your route configuration.

```javascript
{
  // will match everything
  path: '*'
}
{
  // will match anything starting with `/user-`
  path: '/user-*'
}
```

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

### router.getRoutes

Source: https://v3.router.vuejs.org/api

Get the list of all the active route records. Only documented properties are considered Public API.

```APIDOC
## router.getRoutes

### Description
Get the list of all the active route records. Only documented properties are considered Public API.

### Method
Function call

### Signature
```
getRoutes(): RouteRecord[]
```

### Return Value
Array of RouteRecord objects.
```

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

### Initial User Route Configuration

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

A basic route configuration for a user component.

```javascript
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})
```

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

### Queue onReady callback

Source: https://v3.router.vuejs.org/api

Signature for registering a callback to execute after the router completes initial navigation.

```javascript
router.onReady(callback, [errorCallback])
```

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

### router.onReady

Source: https://v3.router.vuejs.org/api

Queues a callback to be called when the router has completed the initial navigation. Useful in server-side rendering to ensure consistent output.

```APIDOC
## router.onReady

### Description
Queues a callback to be called when the router has completed the initial navigation, meaning it has resolved all async enter hooks and async components associated with the initial route. Useful in server-side rendering to ensure consistent output.

### Method
Function call

### Signature
```
router.onReady(callback, [errorCallback])
```

### Parameters
- `callback` (Function) - Required - Called when the initial navigation is complete.
- `errorCallback` (Function) - Optional - Called when the initial route resolution runs into an error (supported in 2.4+).
```

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

### JavaScript Router Configuration

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

Defines route components, maps them to paths, creates the router instance, and mounts the root Vue instance.

```javascript
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!
```

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

### Add In-Component Guards via Mixin

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

Registers a mixin containing navigation guards. Ensure the mixin is added after installing the router plugin.

```javascript
Vue.use(Router)

Vue.mixin({
  beforeRouteUpdate(to, from, next) {
    // ...
  }
})
```

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

### nginx server configuration for history mode

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

Use the try_files directive to serve index.html for requests that do not match existing files.

```nginx
location / {
  try_files $uri $uri/ /index.html;
}
```

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

### append

Source: https://v3.router.vuejs.org/api

The 'append' prop always appends the relative path to the current path. For example, navigating from /a to a relative link b results in /a/b instead of /b.

```APIDOC
## append

### Description
Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with `append` we will end up at `/a/b`.

### Type
`boolean`

### Default
`false`

### Example
```html
<router-link :to="{ path: 'relative/path'}" append></router-link>
```
```

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

### Native Node.js server configuration

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

A basic Node.js server implementation that serves index.html for all requests.

```javascript
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.html" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})
```

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

### Add routes dynamically

Source: https://v3.router.vuejs.org/api

Signature for adding routes dynamically using the same configuration format as the constructor.

```javascript
router.addRoutes(routes: Array<RouteConfig>)
```

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

### Basic App Template

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

The top-level router-view outlet for the application.

```html
<div id="app">
  <router-view></router-view>
</div>
```

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

### Caddy v2 configuration

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

Use the try_files directive in Caddy v2 to handle history mode.

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

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

### Implement a catch-all 404 route

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

Add a catch-all route to the Vue Router configuration to display a 404 page since the server now serves index.html for all paths.

```javascript
const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '/:catchAll(.*)', 
      component: NotFoundComponent,
      name: 'NotFound'
    }
  ]
})
```

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

### Configure routes with multiple components

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

Use the components option (plural) in the route configuration to map named outlets to specific components.

```javascript
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
```

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

### Use this in beforeRouteUpdate

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

Demonstrates using the component instance directly via this in beforeRouteUpdate, as the instance is already available.

```javascript
beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}
```

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

### Post Component Logic for Fetching After Navigation

Source: https://v3.router.vuejs.org/guide/advanced/data-fetching

Component logic using the created hook and route watcher to fetch data after navigation occurs.

```javascript
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      const fetchedId = this.$route.params.id
      // replace `getPost` with your data fetching util / API wrapper
      getPost(fetchedId, (err, post) => {
        // make sure this request is the last one we did, discard otherwise
        if (this.$route.params.id !== fetchedId) return
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}
```

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

### Registering a global before guard with router.beforeEach

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

Use router.beforeEach to register a global guard that executes whenever a navigation is triggered.

```javascript
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
```

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

### router.push(location, onComplete?, onAbort?)

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

Navigates to a different URL by pushing a new entry into the history stack. Accepts a string path or a location descriptor object. Optionally accepts onComplete and onAbort callbacks, or returns a promise in 3.1.0+.

```APIDOC
## router.push(location, onComplete?, onAbort?)

### Description
Pushes a new entry into the history stack to navigate to a different URL. This is the method called internally when clicking a <router-link>.

### Method
push

### Parameters
#### location (string | object) - Required
- String path: e.g., 'home'
- Object with properties:
  - path (string) - Optional - Path to navigate to
  - name (string) - Optional - Name of the route
  - params (object) - Optional - Route parameters (ignored if path is provided)
  - query (object) - Optional - Query parameters

#### onComplete (function) - Optional
Callback called when navigation successfully completed after all async hooks are resolved.

#### onAbort (function) - Optional
Callback called when navigation is aborted (e.g., navigated to same route or to a different route before current navigation finished).

### Request Example
```javascript
// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })
```

### Notes
- params are ignored if a path is provided; use name or full path with parameters.
- In 3.1.0+, can omit callbacks and get a promise instead if Promises are supported.
- If destination is same route with only params changing, use beforeRouteUpdate to react to changes.
```

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

### Apply global transition to router-view

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

Wrap the router-view component with the transition component to apply a transition effect to all routes.

```html
<transition>
  <router-view></router-view>
</transition>
```

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

### router.beforeEach, router.beforeResolve, router.afterEach

Source: https://v3.router.vuejs.org/api

Add global navigation guards. Each method returns a function that removes the registered guard/hook.

```APIDOC
## router.beforeEach, router.beforeResolve, router.afterEach

### Description
Add global navigation guards. Each method returns a function that removes the registered guard/hook.

### Method
Function call

### Signature
```
router.beforeEach((to, from, next) => {
  /* must call `next` */
})

router.beforeResolve((to, from, next) => {
  /* must call `next` */
})

router.afterEach((to, from) => {})
```

### Parameters
- `to` (Route) - Required - The target route being navigated to.
- `from` (Route) - Required - The current route being navigated away from.
- `next` (Function) - Required for beforeEach and beforeResolve - Must be called to resolve the hook.

### Return Value
A function that removes the registered guard/hook.
```

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

### Using <router-view> with <transition> and <keep-alive>

Source: https://v3.router.vuejs.org/api

When using <transition> and <keep-alive> together with <router-view>, ensure <keep-alive> is nested inside the transition component.

```html
<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>
```

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

### Post Component Template for Fetching After Navigation

Source: https://v3.router.vuejs.org/guide/advanced/data-fetching

A Vue template demonstrating how to display loading, error, and content states while fetching data.

```html
<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
```

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

### Component Logic for Fetching Before Navigation

Source: https://v3.router.vuejs.org/guide/advanced/data-fetching

Component logic using beforeRouteEnter and beforeRouteUpdate guards to fetch data before the navigation completes.

```javascript
export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}
```

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

### Firebase hosting configuration

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

Configure rewrites in firebase.json to point all requests to index.html.

```json
{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

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

### Apache server configuration for history mode

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

Use mod_rewrite to redirect requests to index.html if the requested file or directory does not exist.

```apache
<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

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

### Customizing router-link with v-slot

Source: https://v3.router.vuejs.org/api

Demonstrates using the v-slot API to customize the rendering of a router-link. Requires passing a single child element to the router-link.

```html
<router-link
  to="/about"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <NavLink :active="isActive" :href="href" @click="navigate"
    >{{ route.fullPath }}</NavLink
  >
</router-link>
```

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

### exact

Source: https://v3.router.vuejs.org/api

The 'exact' prop forces the link into exact match mode. By default, active class matching is inclusive, so <router-link to="/"> would be active for every route.

```APIDOC
## exact

### Description
The default active class matching behavior is **inclusive match**. For example, `<router-link to="/a">` will get this class applied as long as the current path starts with `/a/` or is `/a`. One consequence of this is that `<router-link to="/">` will be active for every route! To force the link into "exact match mode", use the `exact` prop.

### Type
`boolean`

### Default
`false`

### Example
```html
<!-- this link will only be active at `/` -->
<router-link to="/" exact></router-link>
```
```

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

### Redirect from one path to another

Source: https://v3.router.vuejs.org/guide/essentials/redirect-and-alias

Configures a basic redirect from path '/a' to '/b' within the routes array.

```javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
```

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

### tag

Source: https://v3.router.vuejs.org/api

The 'tag' prop specifies which tag to render the <router-link> as, while still listening to click events for navigation.

```APIDOC
## tag

### Description
Sometimes we want `<router-link>` to render as another tag, e.g `<li>`. Then we can use `tag` prop to specify which tag to render to, and it will still listen to click events for navigation.

### Type
`string`

### Default
`"a"`

### Example
```html
<router-link to="/foo" tag="li">foo</router-link>
<!-- renders as -->
<li>foo</li>
```
```

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

### Accessing route objects in navigation guards

Source: https://v3.router.vuejs.org/api

Demonstrates how the 'to' and 'from' arguments in a navigation guard are route objects.

```javascript
router.beforeEach((to, from, next) => {
  // `to` and `from` are both route objects
})
```

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

### router.go(n)

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

Moves forward or backward in the history stack by the given integer number of steps, similar to window.history.go(n).

```APIDOC
## router.go(n)

### Description
Takes a single integer parameter indicating how many steps to go forwards or backwards in the history stack.

### Method
go

### Parameters
#### n (number) - Required
Integer indicating number of steps to move. Positive goes forward, negative goes backward.

### Request Example
```javascript
// go forward by one record, the same as history.forward()
router.go(1)

// go back by one record, the same as history.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records.
router.go(-100)
router.go(100)
```
```

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

### to

Source: https://v3.router.vuejs.org/api

The 'to' prop denotes the target route of the link. When clicked, its value is passed to router.push() internally, accepting a string or a location descriptor object.

```APIDOC
## to

### Description
The `to` prop denotes the target route of the link. When clicked, the value of the `to` prop will be passed to `router.push()` internally, so the value can be either a string or a location descriptor object.

### Type
`string | Location`

### Required
Yes

### Example
```html
<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
<a href="home">Home</a>

<!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>

<!-- same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
```
```

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

### Define multiple router-view outlets

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

Use the name attribute on router-view elements to define multiple named outlets. Outlets without a name default to 'default'.

```html
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
```

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

### Caddy v1 configuration

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

Use the rewrite directive in Caddy v1 to handle history mode.

```caddy
rewrite {
    regexp .*
    to {path} /
}
```

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

### Using Function mode for dynamic props

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

Using a function to return props, allowing for parameter casting or combining static values with route-based values.

```javascript
const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})
```

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

### router.push params and path behavior

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

Demonstrates that params are ignored when a path is provided, requiring either a route name or a manually constructed path string.

```javascript
const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId } }) // -> /user
```

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

### Defining route records in VueRouter configuration

Source: https://v3.router.vuejs.org/api

Illustrates how route records are defined within the routes configuration array, including nested children.

```javascript
const router = new VueRouter({
  routes: [
    // the following object is a route record
    {
      path: '/foo',
      component: Foo,
      children: [
        // this is also a route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})
```

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

### Enable Native Smooth Scrolling

Source: https://v3.router.vuejs.org/guide/advanced/scroll-behavior

Add the behavior: 'smooth' option to the returned object to enable native smooth scrolling in supported browsers.

```javascript
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth',
    }
  }
}
```

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

### Accessing Router and Route in Components

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

Demonstrates how to access the router and current route via this.$router and this.$route within a Vue component.

```javascript
// Home.vue
export default {
  computed: {
    username() {
      // We will see what `params` is shortly
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}
```

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

### beforeEnter (Per-Route Guard)

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

Defines a guard directly on a route's configuration object. Called before entering the route, with the same signature as global before guards.

```APIDOC
## beforeEnter (Per-Route Guard)

### Description
Defines a guard directly on a route's configuration object. Called before entering the route, with the same signature as global before guards.

### Method
register

### Signature
beforeEnter(to, from, next)

### Parameters
- **to** (Route) - The target route being navigated to.
- **from** (Route) - The current route being navigated away from.
- **next** (Function) - Function to confirm or cancel the navigation.

### Usage Example
```js
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
```
```

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

### Programmatic navigation methods

Source: https://v3.router.vuejs.org/api

Signatures for programmatic navigation methods used to change the URL.

```javascript
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()
```

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

### Define an async component with dynamic import

Source: https://v3.router.vuejs.org/guide/advanced/lazy-loading

Combine the factory function and dynamic import to create an async component that webpack automatically splits.

```javascript
const Foo = () => import('./Foo.vue')
```

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

### Dynamic redirect using a function

Source: https://v3.router.vuejs.org/guide/essentials/redirect-and-alias

Uses a function to dynamically determine the redirect target based on the route argument.

```javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // the function receives the target route as the argument
      // return redirect path/location here.
    }}
  ]
})
```

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

### Navigate to a named route programmatically

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

Use the same object structure with router.push() to navigate to a named route programmatically.

```javascript
router.push({ name: 'user', params: { userId: 123 } })
```

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

### IIS web.config configuration

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

Configure IIS UrlRewrite to handle history mode by rewriting requests to the root.

```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>
```

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

### event

Source: https://v3.router.vuejs.org/api

The 'event' prop specifies the event(s) that can trigger the link navigation.

```APIDOC
## event

### Description
Specify the event(s) that can trigger the link navigation.

### Type
`string | Array<string>`

### Default
`'click'`
```

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

### Configure nested named view routes

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

Define nested routes using the components option to map child components to named router-view outlets.

```javascript
{
  path: '/settings',
  // You could also have named views at the top
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}
```

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

### exact-path

Source: https://v3.router.vuejs.org/api

The 'exact-path' prop allows matching only using the path section of the URL, effectively ignoring the query and hash sections. New in 3.5.0.

```APIDOC
## exact-path

### Description
Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.

### Type
`boolean`

### Default
`false`

### Example
```html
<!-- this link will also be active at `/search?page=2` or `/search#filters` -->
<router-link to="/search" exact-path> </router-link>
```
```

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

### router-link exact prop

Source: https://v3.router.vuejs.org/api

Using the exact prop to force the link into exact match mode for active class application.

```html
<!-- this link will only be active at `/` -->
<router-link to="/" exact></router-link>
```

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

### router.replace(location, onComplete?, onAbort?)

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

Navigates to a different URL without pushing a new history entry, replacing the current entry. Acts like router.push but does not add to history stack.

```APIDOC
## router.replace(location, onComplete?, onAbort?)

### Description
Navigates to a different URL by replacing the current history entry. It acts like router.push but does not push a new entry.

### Method
replace

### Parameters
#### location (string | object) - Required
Same as router.push: string path or location descriptor object.

#### onComplete (function) - Optional
Callback called when navigation successfully completed.

#### onAbort (function) - Optional
Callback called when navigation is aborted.

### Request Example
```javascript
// Equivalent to <router-link :to="..." replace>
router.replace({ path: 'home' })
```

### Notes
- In 3.1.0+, can omit callbacks and get a promise instead if Promises are supported.
```

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

### router.addRoutes (deprecated)

Source: https://v3.router.vuejs.org/api

Dynamically add more routes to the router. Deprecated: use router.addRoute() instead.

```APIDOC
## router.addRoutes (deprecated)

### Description
Dynamically add more routes to the router. Deprecated: use router.addRoute() instead.

### Method
Function call

### Signature
```
router.addRoutes(routes: Array<RouteConfig>)
```

### Parameters
- `routes` (Array<RouteConfig>) - Required - An array of route configs using the same format as the `routes` constructor option.
```

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

### Access Path Match Parameters

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

When using asterisk routes, the matched portion of the URL is available via the pathMatch parameter in $route.params.

```javascript
// Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'
```

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

### Define per-route transitions

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

Use the transition component with different names inside each route component to apply unique transition effects per route.

```javascript
const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}
```

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

### Use dynamic import for code splitting

Source: https://v3.router.vuejs.org/guide/advanced/lazy-loading

Webpack 2 supports the dynamic import syntax to indicate a code-split point, which returns a Promise.

```javascript
import('./Foo.vue') // returns a Promise
```

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

### router-link exact-path prop

Source: https://v3.router.vuejs.org/api

Using the exact-path prop to match only the path section of the URL, ignoring query and hash.

```html
<!-- this link will also be active at `/search?page=2` or `/search#filters` -->
<router-link to="/search" exact-path> </router-link>
```

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

### Define meta fields in route configuration

Source: https://v3.router.vuejs.org/guide/advanced/meta

Attach arbitrary properties to a route record using the meta object within the routes configuration.

```javascript
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})
```

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

### Basic HTML Structure for Vue Router

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

Defines the HTML structure including the router-link components for navigation and the router-view outlet for rendering matched components.

```html
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
```

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

### React to Route Parameter Changes with Navigation Guard

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

Use the beforeRouteUpdate navigation guard to react to parameter changes. Ensure next() is called to continue the navigation.

```javascript
const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
```

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

### Define Dynamic Route Segments

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

Use a colon prefix in the path to define dynamic segments that map to the same component.

```javascript
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})
```

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

### router.afterEach

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

Registers a global after hook that is called after navigation is confirmed. Unlike guards, after hooks do not receive a next function and cannot affect navigation.

```APIDOC
## router.afterEach

### Description
Registers a global after hook. Called after navigation is confirmed. Does not receive a next function and cannot affect navigation.

### Method
register

### Signature
router.afterEach((to, from) => { ... })

### Parameters
- **to** (Route) - The target route that was navigated to.
- **from** (Route) - The previous route.

### Usage Example
```js
router.afterEach((to, from) => {
  // ...
})
```
```

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

### router.addRoute (route)

Source: https://v3.router.vuejs.org/api

Add a new route to the router. If the route has a name and there is already an existing one with the same name, it overwrites it.

```APIDOC
## router.addRoute (route)

### Description
Add a new route to the router. If the route has a name and there is already an existing one with the same name, it overwrites it.

### Method
Function call

### Signature
```
addRoute(route: RouteConfig): () => void
```

### Parameters
- `route` (RouteConfig) - Required - The route configuration to add.

### Return Value
A function that removes the added route.
```
Tokens:
Raw