# API Reference
-- [Interfaces](./vue-router-interface.md)
-- [Types](./vue-router-typealias.md)
-
## `<router-link>` Props
### to
- **See Also**: [Meta fields](/guide/advanced/meta.md)
+## RouteRecordNormalized
+
+Normalized version of a [Route Record](#routerecordraw)
+
+### aliasOf
+
+- **Type**: `RouteRecordNormalized | undefined`
+- **Details**:
+
+ Defines if this record is the alias of another one. This property is `undefined` if the record is the original one.
+
+### beforeEnter
+
+- **Type**: [`NavigationGuard`](#navigationguard)
+- **Details**:
+
+ Navigation guard applied when entering this record from somewhere else.
+
+- **See Also**: [Navigation guards](/guide/advanced/navigation-guards.md)
+
+### children
+
+- **Type**: Array of normalized [route records](#routerecordnormalized)
+- **Details**:
+
+ Children route records of the current route. Empty array if none.
+
+### components
+
+- **Type**: `Record<string, Component>`
+- **Details**:
+
+ Dictionary of named views, if none, contains an object with the key `default`.
+
+### meta
+
+- **Type**: `RouteMeta`
+- **Details**:
+
+ Arbitrary data attached to all matched records merged (non recursively) from parent to child.
+
+- **See also**: [Meta fields](/guide/advanced/meta.md)
+
+### name
+
+- **Type**: `string | symbol | undefined`
+- **Details**:
+
+ Name for the route record. `undefined` if none was provided.
+
+### path
+
+- **Type**: `string`
+- **Details**:
+
+ Normalized path of the record. Includes any parent's `path`.
+
+### props
+
+- **Type**: `Record<string, boolean | Function | Record<string, any>>`
+- **Details**:
+
+ Dictionary of the [`props` option](#props) for each named view. If none, it will contain only one property named `default`.
+
+### redirect
+
+- **Type**: [`RouteLocationRaw`](#routelocationraw)
+- **Details**:
+
+ Where to redirect if the route is directly matched. The redirection happens before any navigation guard and triggers a new navigation with the new target location.
+
## RouteLocationRaw
User-level route location that can be passed to `router.push()`, `redirect`, and returned in [Navigation Guards](/guide/advanced/navigation-guards.md).
### matched
-Array of [normalized route records](#routerecord).
+- **Type**: [`RouteRecordNormalized[]`](#routerecordnormalized)
+- **Details**:
+
+ Array of [normalized route records](#routerecord) that were matched with the given route location.
## NavigationFailure
+++ /dev/null
-# Interface
-
-## RouteRecordNormalized
-
-Normalized version of a [Route Record](./vue-router-typealias#routerecord)
-
-**Signature:**
-
-```typescript
-export interface RouteRecordNormalized
-```
-
-### Methods
-
-### Properties
-
-#### aliasOf
-
-Defines if this record is the alias of another one. This property is `undefined` if the record is the original one.
-
-**Signature:**
-
-```typescript
-aliasOf: RouteRecordNormalized | undefined
-```
-
-#### beforeEnter
-
-**Signature:**
-
-```typescript
-beforeEnter: RouteRecordMultipleViews['beforeEnter']
-```
-
-#### children
-
-**Signature:**
-
-```typescript
-children: Exclude<_RouteRecordBase['children'], void>;
-```
-
-#### components
-
-**Signature:**
-
-```typescript
-components: RouteRecordMultipleViews['components']
-```
-
-#### instances
-
-Mounted route component instances Having the instances on the record mean beforeRouteUpdate and beforeRouteLeave guards can only be invoked with the latest mounted app instance if there are multiple application instances rendering the same view, basically duplicating the content on the page, which shouldn't happen in practice. It will work if multiple apps are rendering different named views.
-
-**Signature:**
-
-```typescript
-instances: Record<string, ComponentPublicInstance | undefined | null>;
-```
-
-#### meta
-
-Arbitrary data attached to the record.
-
-**Signature:**
-
-```typescript
-meta: Exclude<_RouteRecordBase['meta'], void>;
-```
-
-#### name
-
-Name for the route record.
-
-**Signature:**
-
-```typescript
-name: _RouteRecordBase['name']
-```
-
-#### path
-
-Path of the record. Should start with `/` unless the record is the child of another record.
-
-**Signature:**
-
-```typescript
-path: _RouteRecordBase['path']
-```
-
-#### props
-
-**Signature:**
-
-```typescript
-props: Record<string, _RouteRecordProps>;
-```
-
-#### redirect
-
-Where to redirect if the route is directly matched. The redirection happens before any navigation guard and triggers a new navigation with the new target location.
-
-**Signature:**
-
-```typescript
-redirect: _RouteRecordBase['redirect'] | undefined
-```
-
-### Methods
-
-### Properties
-
-#### name
-
-#### route
-
-## ScrollBehavior_2
-
-### Methods
-
-### Properties
+++ /dev/null
-# TypeAlias
-
-## RouteRecord
-
-Normalized version of a [Route Record](./vue-router-typealias#routerecord)
-
-**Signature:**
-
-```typescript
-export declare type RouteRecord = RouteRecordNormalized
-```
-
-## RouteRecordRaw
})
```
-`router.beforeResolve` is the ideal spot to fetch data or do any other operation that you want to avoid doing if the user cannot enter a page. It's also very easy to combine with [`meta` fields](./meta.md) to create a [generic fetching mechanism](#TODO)
+`router.beforeResolve` is the ideal spot to fetch data or do any other operation that you want to avoid doing if the user cannot enter a page. It's also very easy to combine with [`meta` fields](./meta.md) to create a [generic fetching mechanism](#TODO).
## Global After Hooks
Regular params will only match characters in between url fragments, separated by `/`. If we want to match **anything**, we can use a custom _param_ regexp by adding the regexp inside parentheses right after the _param_:
```js
-{
+const routes = [
// will match everything and put it under `$route.params.pathMatch`
- path: '/:pathMatch(.*)'
-}
-{
+ { path: '/:pathMatch(.*)*', name: 'NotFound' },
// will match anything starting with `/user-` and put it under `$route.params.afterUser`
- path: '/user-:afterUser(.*)'
-}
+ { path: '/user-:afterUser(.*)' },
+]
```
+In this specific scenario we are using a [custom regexp](/guide/advanced/path-matching.md#custom-regexp) between parentheses and marking the `pathMatch` param as [optionally repeatable](/guide/advanced/path-matching.md#zero-or-more). This is to allows us to directly navigate to the route if we need to by splitting the `path` into an array:
+
+```js
+this.$router.push({
+ name: 'NotFound',
+ params: { pathMatch: this.$route.path.split('/') },
+})
+```
+
+See more in the [repeated params](/guide/advanced/path-matching.md#zero-or-more) section.
+
If you are using [History mode](./history-mode.md), make sure to follow the instructions to correctly configure your server as well.
## Advanced Matching Patterns
Therefore, if you are already familiar with [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipulating history will feel familiar when using Vue Router.
-It is worth mentioning that Vue Router navigation methods (`push`, `replace`, `go`) work consistently no matter the kind of [`history` option](#TODO_api_or_custom_history) is passed when creating the router instance.
+It is worth mentioning that Vue Router navigation methods (`push`, `replace`, `go`) work consistently no matter the kind of [`history` option](/api/#history) is passed when creating the router instance.
// the function receives the target route as the argument
// we return a redirect path/location here.
return { path: '/search', query: { q: to.params.searchText } }
- }
+ },
},
{
- path: '/search'
+ path: '/search',
// ...
- }
+ },
]
```
redirect: to => {
// the function receives the target route as the argument
// return redirect path/location here.
- }
- }
+ },
+ },
]
```
// - /users
// - /users/list
// - /people
- { path: '', component: UserList, alias: ['/people', 'list'] }
- ]
- }
+ { path: '', component: UserList, alias: ['/people', 'list'] },
+ ],
+ },
]
```
// - /users/24
// - /users/24/profile
// - /24
- { path: 'profile', component: UserDetails, alias: ['/:id', ''] }
- ]
- }
+ { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
+ ],
+ },
]
```
TODO: canonical links in cookbook https://support.google.com/webmasters/answer/139066?hl=en
-
-<!-- TODO: add the advanced usage here as well -->
-
-For advanced usage, check out the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js).
**Reason**: We use the history state to save information about the navigation like the scroll position, previous location, etc.
+### Navigation guards in mixins are ignored
+
+At the moment navigation guards in mixins are not supported. You can track its support at [vue-router#454](https://github.com/vuejs/vue-router-next/issues/454).
+
### TypeScript
To make typings more consistent and expressive, some types have been renamed:
projects / thirdparty / vuejs / router.git / commitdiff
