text: '更新日志',
link: 'https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md',
},
+ {
+ text: 'Vue.js 认证',
+ link: 'https://certification.vuejs.org/?friend=VUEROUTER',
+ },
],
},
],
text: '组合式 API',
link: '/zh/guide/advanced/composition-api.html',
},
+ {
+ text: 'RouterView 插槽',
+ link: '/guide/advanced/router-view-slot.html',
+ },
{
text: '过渡动效',
link: '/zh/guide/advanced/transitions.html',
{
"zh": {
- "hash": "1a3a28f",
- "date": "2023-04-08"
+ "hash": "35a9c1b",
+ "date": "2023-12-16"
}
-}
+}
\ No newline at end of file
- [RouteLocationNormalizedLoaded](interfaces/RouteLocationNormalizedLoaded.md)
- [RouteLocationOptions](interfaces/RouteLocationOptions.md)
- [RouteMeta](interfaces/RouteMeta.md)
+- [RouteRecordMultipleViews](interfaces/RouteRecordMultipleViews.md)
+- [RouteRecordMultipleViewsWithChildren](interfaces/RouteRecordMultipleViewsWithChildren.md)
- [RouteRecordNormalized](interfaces/RouteRecordNormalized.md)
+- [RouteRecordRedirect](interfaces/RouteRecordRedirect.md)
+- [RouteRecordSingleView](interfaces/RouteRecordSingleView.md)
+- [RouteRecordSingleViewWithChildren](interfaces/RouteRecordSingleViewWithChildren.md)
- [Router](interfaces/Router.md)
- [RouterHistory](interfaces/RouterHistory.md)
- [RouterLinkProps](interfaces/RouterLinkProps.md)
- [RouterOptions](interfaces/RouterOptions.md)
- [RouterScrollBehavior](interfaces/RouterScrollBehavior.md)
- [RouterViewProps](interfaces/RouterViewProps.md)
+- [\_RouteRecordBase](interfaces/RouteRecordBase.md)
## TS 类型别名 %{#Type-Aliases}%
### LocationQuery %{#Type-Aliases-LocationQuery}%
-Ƭ **LocationQuery**: `Record`<`string`, `LocationQueryValue` \| `LocationQueryValue`[]\>
+Ƭ **LocationQuery**: `Record`\<`string`, `LocationQueryValue` \| `LocationQueryValue`[]\>
出现在 [RouteLocationNormalized](interfaces/RouteLocationNormalized.md) 中的规范化查询对象。
### LocationQueryRaw %{#Type-Aliases-LocationQueryRaw}%
-Ƭ **LocationQueryRaw**: `Record`<`string` \| `number`, `LocationQueryValueRaw` \| `LocationQueryValueRaw`[]\>
+Ƭ **LocationQueryRaw**: `Record`\<`string` \| `number`, `LocationQueryValueRaw` \| `LocationQueryValueRaw`[]\>
松散的 [LocationQuery](index.md#locationquery) 对象，可以被传递给诸如
-[push](interfaces/Router.md#push)、[replace](interfaces/Router.md#replace) 或任何创建
+[Router.push](interfaces/Router.md#push)、[Router.replace](interfaces/Router.md#replace) 或任何创建
[RouteLocationRaw](index.md#routelocationraw) 的函数。
___
### PathParserOptions %{#Type-Aliases-PathParserOptions}%
-Ƭ **PathParserOptions**: `Pick`<`_PathParserOptions`, ``"end"`` \| ``"sensitive"`` \| ``"strict"``\>
+Ƭ **PathParserOptions**: `Pick`\<`_PathParserOptions`, ``"end"`` \| ``"sensitive"`` \| ``"strict"``\>
___
### RouteParams %{#Type-Aliases-RouteParams}%
-Ƭ **RouteParams**: `Record`<`string`, `RouteParamValue` \| `RouteParamValue`[]\>
+Ƭ **RouteParams**: `Record`\<`string`, `RouteParamValue` \| `RouteParamValue`[]\>
___
### RouteParamsRaw %{#Type-Aliases-RouteParamsRaw}%
-Ƭ **RouteParamsRaw**: `Record`<`string`, `RouteParamValueRaw` \| `Exclude`<`RouteParamValueRaw`, ``null`` \| `undefined`\>[]\>
+Ƭ **RouteParamsRaw**: `Record`\<`string`, `RouteParamValueRaw` \| `Exclude`\<`RouteParamValueRaw`, ``null`` \| `undefined`\>[]\>
___
### RouteRecordRaw %{#Type-Aliases-RouteRecordRaw}%
-Ƭ **RouteRecordRaw**: `RouteRecordSingleView` \| `RouteRecordSingleViewWithChildren` \| `RouteRecordMultipleViews` \| `RouteRecordMultipleViewsWithChildren` \| `RouteRecordRedirect`
+Ƭ **RouteRecordRaw**: [`RouteRecordSingleView`](interfaces/RouteRecordSingleView.md) \| [`RouteRecordSingleViewWithChildren`](interfaces/RouteRecordSingleViewWithChildren.md) \| [`RouteRecordMultipleViews`](interfaces/RouteRecordMultipleViews.md) \| [`RouteRecordMultipleViewsWithChildren`](interfaces/RouteRecordMultipleViewsWithChildren.md) \| [`RouteRecordRedirect`](interfaces/RouteRecordRedirect.md)
___
### UseLinkOptions %{#Type-Aliases-UseLinkOptions}%
-Ƭ **UseLinkOptions**: `VueUseOptions`<`RouterLinkOptions`\>
+Ƭ **UseLinkOptions**: `VueUseOptions`\<`RouterLinkOptions`\>
## 变量 %{#Variables}%
### RouterView %{#Variables-RouterView}%
-• `Const` **RouterView**: () => { `$props`: `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) ; `$slots`: { `default?`: (`__namedParameters`: { `Component`: `VNode`<`RendererNode`, `RendererElement`, { `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`<`RendererNode`, `RendererElement`, { `[key: string]`: `any`; }\>[] } }
+• `Const` **RouterView**: () => \{ `$props`: `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) ; `$slots`: \{ `default?`: (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\>[] } }
#### 类型声明 %{#Variables-RouterView-Type-declaration}%
-• **new RouterView**()
+• **new RouterView**(): `Object`
用于显示用户当前所处路由的组件。
+##### 返回值 %{#Variables-RouterView-Returns}%
+
+`Object`
+
+| 名称 | 类型 |
+| :------ | :------ |
+| `$props` | `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) |
+| `$slots` | \{ `default?`: (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\>[] } |
+| `$slots.default?` | (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\>[] |
+
___
### START\_LOCATION %{#Variables-START_LOCATION}%
创建一个 hash 模式的历史。在没有主机的 web 应用 (如 `file://`) 或无法通过配置服务器来处理任意 URL 的时候非常有用。
+#### 参数 %{#Functions-createWebHashHistory-Parameters}%
+
+| 名称 | 类型 | 描述 |
+| :------ | :------ | :------ |
+| `base?` | `string` | 可选提供的基础位置。默认为 `location.pathname + location.search`。如果在 `head` 中有一个 `<base>` 标签，它的值会因此被忽略，**但注意它会影响所有 history.pushState() 的调用**，这意味着如果你使用一个 `<base>` 标签，它的 `href` 值**必须与这个参数匹配** (忽略 `#` 后的任何东西)。 |
+
+#### 返回值 %{#Functions-createWebHashHistory-Returns}%
+
+[`RouterHistory`](interfaces/RouterHistory.md)
+
**示例**
```js
createWebHashHistory('/iAmIgnored') // 给出一个 `file:///usr/etc/folder/index.html#` 的 URL
```
-#### 参数 %{#Functions-createWebHashHistory-Parameters}%
-
-| 名称 | 类型 | 描述 |
-| :------ | :------ | :------ |
-| `base?` | `string` | 可选提供的基础位置。默认为 `location.pathname + location.search`。如果在 `head` 中有一个 `<base>` 标签，它的值会因此被忽略，**但注意它会影响所有 history.pushState() 的调用**，这意味着如果你使用一个 `<base>` 标签，它的 `href` 值**必须与这个参数匹配** (忽略 `#` 后的任何东西)。 |
-
-#### 返回值 %{#Functions-createWebHashHistory-Returns}%
-
-[`RouterHistory`](interfaces/RouterHistory.md)
-
___
### createWebHistory %{#Functions-createWebHistory}%
检查一个对象是否是 [NavigationFailure](interfaces/NavigationFailure.md)。
+#### 参数 %{#Functions-isNavigationFailure-Parameters}%
+
+| 名称 | 类型 | 描述 |
+| :------ | :------ | :------ |
+| `error` | `any` | 可能的 [NavigationFailure](interfaces/NavigationFailure.md) |
+| `type?` | `NAVIGATION_GUARD_REDIRECT` | 可选的待检查类型 |
+
+#### 返回值 %{#Functions-isNavigationFailure-Returns}%
+
+error is NavigationRedirectError
+
**示例**
```js
})
```
-#### 参数 %{#Functions-isNavigationFailure-Parameters}%
-
-| 名称 | 类型 | 描述 |
-| :------ | :------ | :------ |
-| `error` | `any` | 可能的 [NavigationFailure](interfaces/NavigationFailure.md) |
-| `type?` | `NAVIGATION_GUARD_REDIRECT` | 可选的待检查类型 |
-
-#### 返回值 %{#Functions-isNavigationFailure-Returns}%
-
-error is NavigationRedirectError
-
▸ **isNavigationFailure**(`error`, `type?`): error is NavigationFailure
#### 参数 %{#Functions-isNavigationFailure-Parameters_1}%
### loadRouteLocation %{#Functions-loadRouteLocation}%
-▸ **loadRouteLocation**(`route`): `Promise`<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
+▸ **loadRouteLocation**(`route`): `Promise`\<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
确保路由被加载，所以它可以作为一个 prop 传递给 `<RouterView>`。
#### 返回值 %{#Functions-loadRouteLocation-Returns}%
-`Promise`<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
+`Promise`\<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\>
___
| 名称 | 类型 |
| :------ | :------ |
-| `props` | `VueUseOptions`<`RouterLinkOptions`\> |
+| `props` | `VueUseOptions`\<`RouterLinkOptions`\> |
#### 返回值 %{#Functions-useLink-Returns}%
| 名称 | 类型 |
| :------ | :------ |
| `href` | `ComputedRef<string\>` |
-| `isActive` | `ComputedRef`<`boolean`\> |
-| `isExactActive` | `ComputedRef`<`boolean`\> |
-| `navigate` | (`e`: `MouseEvent`) => `Promise`<`void` \| [`NavigationFailure`](interfaces/NavigationFailure.md)\> |
-| `route` | `ComputedRef`<[`RouteLocation`](interfaces/RouteLocation.md) & { `href`: `string` }\> |
+| `isActive` | `ComputedRef`\<`boolean`\> |
+| `isExactActive` | `ComputedRef`\<`boolean`\> |
+| `navigate` | (`e`: `MouseEvent`) => `Promise`\<`void` \| [`NavigationFailure`](interfaces/NavigationFailure.md)\> |
+| `route` | `ComputedRef`\<[`RouteLocation`](interfaces/RouteLocation.md) & { `href`: `string` }\> |
___
# 接口：NavigationGuard %{#interface-navigationguard}%
+导航守卫。详情可查阅[导航守卫](/zh/guide/advanced/navigation-guards.md)。
+
## 可调用函数 %{#Callable}%
### NavigationGuard %{#Callable-NavigationGuard}%
-▸ **NavigationGuard**(`to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\>
-
-导航守卫。详情可查阅[导航守卫](/zh/guide/advanced/navigation-guards.md).
+▸ **NavigationGuard**(`to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\>
#### 参数 %{#Callable-NavigationGuard-Parameters}%
#### 返回值 %{#Callable-NavigationGuard-Returns}%
-`NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\>
+`NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\>
[API 参考](../index.md) / NavigationGuardWithThis
-# 接口：NavigationGuardWithThis<T\> %{#interface-navigationguardwiththis-t}%
+# 接口：NavigationGuardWithThis\<T\> %{#interface-navigationguardwiththis-t}%
+
+导航守卫。详情可查阅[导航守卫](/zh/guide/advanced/navigation-guards.md)。
## 类型参数 %{#Type-parameters}%
### NavigationGuardWithThis %{#Callable-NavigationGuardWithThis}%
-▸ **NavigationGuardWithThis**(`this`, `to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\>
-
-导航守卫。详情可查阅[导航守卫](/zh/guide/advanced/navigation-guards.md).
+▸ **NavigationGuardWithThis**(`this`, `to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\>
#### 参数 %{#Callable-NavigationGuardWithThis-Parameters}%
#### 返回值 %{#Callable-NavigationGuardWithThis-Returns}%
-`NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\>
+`NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\>
### beforeEnter %{#Properties-beforeEnter}%
-• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\>[]
+• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
被注册的 beforeEnter 守卫
### components %{#Properties-components}%
-• **components**: `undefined` \| ``null`` \| `Record`<`string`, [`RouteComponent`](../index.md#routecomponent)\>
+• **components**: `undefined` \| ``null`` \| `Record`\<`string`, [`RouteComponent`](../index.md#routecomponent)\>
{@inheritDoc RouteRecordMultipleViews.components}
### instances %{#Properties-instances}%
-• **instances**: `Record`<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`<{}, {}, {}, {}, {}, {}, {}, {}, ``false``, `ComponentOptionsBase`<`any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, {}, {}, `string`\>, {}\>\>
+• **instances**: `Record`\<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`\>
<!-- TODO: translation -->
• **meta**: [`RouteMeta`](RouteMeta.md)
-{@inheritDoc _RouteRecordBase.meta}
+<!-- TODO: translation -->
+
+Arbitrary data attached to the record.
#### 继承自 %{#Properties-meta-Inherited-from}%
• **name**: `undefined` \| [`RouteRecordName`](../index.md#routerecordname)
-{@inheritDoc _RouteRecordBase.name}
+<!-- TODO: translation -->
+
+Name for the route record. Must be unique.
#### 继承自 %{#Properties-name-Inherited-from}%
• **path**: `string`
-{@inheritDoc _RouteRecordBase.path}
+<!-- TODO: translation -->
+
+Path of the record. Should start with `/` unless the record is the child of another record.
#### 继承自 %{#Properties-path-Inherited-from}%
### props %{#Properties-props}%
-• **props**: `Record`<`string`, `_RouteRecordProps`\>
+• **props**: `Record`\<`string`, `_RouteRecordProps`\>
+
+<!-- TODO: translation -->
-{@inheritDoc RouteRecordMultipleViews.props}
+Allow passing down params as props to the component rendered by `router-view`. Should be an object with the same keys as `components` or a boolean to be applied to every component.
#### 继承自 %{#Properties-props-Inherited-from}%
• **redirect**: `undefined` \| `RouteRecordRedirectOption`
-{@inheritDoc _RouteRecordBase.redirect}
+<!-- TODO: translation -->
+
+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.
#### 继承自 %{#Properties-redirect-Inherited-from}%
# 接口：RouteLocationNormalized
-和 [RouteLocation](RouteLocation.md) 类似但是其 [matched](RouteLocationNormalized.md#matched) 无法包含重定向的记录
+和 [RouteLocation](RouteLocation.md) 类似但是其 [RouteLocationNormalized.matched](RouteLocationNormalized.md#matched) 无法包含重定向的记录
## 继承关系 %{#Hierarchy}%
## 继承关系 %{#Hierarchy}%
-- `Record`<`string` \| `number` \| `symbol`, `unknown`\>
+- `Record`\<`string` \| `number` \| `symbol`, `unknown`\>
↳ **`RouteMeta`**
--- /dev/null
+---
+editLink: false
+---
+
+<!-- TODO: translation -->
+
+[API Documentation](../index.md) / \_RouteRecordBase
+
+# Interface: \_RouteRecordBase
+
+Internal type for common properties among all kind of [RouteRecordRaw](../index.md#RouteRecordRaw).
+
+## Hierarchy
+
+- [`PathParserOptions`](../index.md#PathParserOptions)
+
+ ↳ **`_RouteRecordBase`**
+
+ ↳↳ [`RouteRecordSingleView`](RouteRecordSingleView.md)
+
+ ↳↳ [`RouteRecordSingleViewWithChildren`](RouteRecordSingleViewWithChildren.md)
+
+ ↳↳ [`RouteRecordMultipleViews`](RouteRecordMultipleViews.md)
+
+ ↳↳ [`RouteRecordMultipleViewsWithChildren`](RouteRecordMultipleViewsWithChildren.md)
+
+ ↳↳ [`RouteRecordRedirect`](RouteRecordRedirect.md)
+
+## Properties
+
+### alias
+
+• `Optional` **alias**: `string` \| `string`[]
+
+Aliases for the record. Allows defining extra paths that will behave like a
+copy of the record. Allows having paths shorthands like `/users/:id` and
+`/u/:id`. All `alias` and `path` values must share the same params.
+
+___
+
+### beforeEnter
+
+• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
+
+Before Enter guard specific to this record. Note `beforeEnter` has no
+effect if the record has a `redirect` property.
+
+___
+
+### children
+
+• `Optional` **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[]
+
+Array of nested routes.
+
+___
+
+### end
+
+• `Optional` **end**: `boolean`
+
+Should the RegExp match until the end by appending a `$` to it.
+
+**`Default Value`**
+
+`true`
+
+#### Inherited from
+
+PathParserOptions.end
+
+___
+
+### meta
+
+• `Optional` **meta**: [`RouteMeta`](RouteMeta.md)
+
+Arbitrary data attached to the record.
+
+___
+
+### name
+
+• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName)
+
+Name for the route record. Must be unique.
+
+___
+
+### path
+
+• **path**: `string`
+
+Path of the record. Should start with `/` unless the record is the child of
+another record.
+
+**`Example`**
+
+```ts
+`/users/:id` matches `/users/1` as well as `/users/posva`.
+```
+
+___
+
+### props
+
+• `Optional` **props**: `_RouteRecordProps` \| `Record`\<`string`, `_RouteRecordProps`\>
+
+Allow passing down params as props to the component rendered by `router-view`.
+
+___
+
+### redirect
+
+• `Optional` **redirect**: `RouteRecordRedirectOption`
+
+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.
+
+___
+
+### 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
--- /dev/null
+---
+editLink: false
+---
+
+<!-- TODO: translation -->
+
+[API Documentation](../index.md) / RouteRecordMultipleViews
+
+# Interface: RouteRecordMultipleViews
+
+Route Record defining multiple named components with the `components` option.
+
+## Hierarchy
+
+- [`_RouteRecordBase`](RouteRecordBase.md)
+
+ ↳ **`RouteRecordMultipleViews`**
+
+## Properties
+
+### alias
+
+• `Optional` **alias**: `string` \| `string`[]
+
+Aliases for the record. Allows defining extra paths that will behave like a
+copy of the record. Allows having paths shorthands like `/users/:id` and
+`/u/:id`. All `alias` and `path` values must share the same params.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias)
+
+___
+
+### beforeEnter
+
+• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
+
+Before Enter guard specific to this record. Note `beforeEnter` has no
+effect if the record has a `redirect` property.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter)
+
+___
+
+### children
+
+• `Optional` **children**: `undefined`
+
+Array of nested routes.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children)
+
+___
+
+### component
+
+• `Optional` **component**: `undefined`
+
+___
+
+### components
+
+• **components**: `Record`\<`string`, `RawRouteComponent`\>
+
+Components to display when the URL matches this route. Allow using named views.
+
+___
+
+### end
+
+• `Optional` **end**: `boolean`
+
+Should the RegExp match until the end by appending a `$` to it.
+
+**`Default Value`**
+
+`true`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end)
+
+___
+
+### meta
+
+• `Optional` **meta**: [`RouteMeta`](RouteMeta.md)
+
+Arbitrary data attached to the record.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta)
+
+___
+
+### name
+
+• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName)
+
+Name for the route record. Must be unique.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name)
+
+___
+
+### path
+
+• **path**: `string`
+
+Path of the record. Should start with `/` unless the record is the child of
+another record.
+
+**`Example`**
+
+```ts
+`/users/:id` matches `/users/1` as well as `/users/posva`.
+```
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path)
+
+___
+
+### props
+
+• `Optional` **props**: `boolean` \| `Record`\<`string`, `_RouteRecordProps`\>
+
+Allow passing down params as props to the component rendered by
+`router-view`. Should be an object with the same keys as `components` or a
+boolean to be applied to every component.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props)
+
+___
+
+### redirect
+
+• `Optional` **redirect**: `undefined`
+
+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.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect)
+
+___
+
+### sensitive
+
+• `Optional` **sensitive**: `boolean`
+
+Makes the RegExp case-sensitive.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive)
+
+___
+
+### strict
+
+• `Optional` **strict**: `boolean`
+
+Whether to disallow a trailing slash or not.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict)
--- /dev/null
+---
+editLink: false
+---
+
+<!-- TODO: translation -->
+
+[API Documentation](../index.md) / RouteRecordMultipleViewsWithChildren
+
+# Interface: RouteRecordMultipleViewsWithChildren
+
+Route Record defining multiple named components with the `components` option and children.
+
+## Hierarchy
+
+- [`_RouteRecordBase`](RouteRecordBase.md)
+
+ ↳ **`RouteRecordMultipleViewsWithChildren`**
+
+## Properties
+
+### alias
+
+• `Optional` **alias**: `string` \| `string`[]
+
+Aliases for the record. Allows defining extra paths that will behave like a
+copy of the record. Allows having paths shorthands like `/users/:id` and
+`/u/:id`. All `alias` and `path` values must share the same params.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias)
+
+___
+
+### beforeEnter
+
+• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
+
+Before Enter guard specific to this record. Note `beforeEnter` has no
+effect if the record has a `redirect` property.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter)
+
+___
+
+### children
+
+• **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[]
+
+Array of nested routes.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children)
+
+___
+
+### component
+
+• `Optional` **component**: `undefined`
+
+___
+
+### components
+
+• `Optional` **components**: ``null`` \| `Record`\<`string`, `RawRouteComponent`\>
+
+Components to display when the URL matches this route. Allow using named views.
+
+___
+
+### end
+
+• `Optional` **end**: `boolean`
+
+Should the RegExp match until the end by appending a `$` to it.
+
+**`Default Value`**
+
+`true`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end)
+
+___
+
+### meta
+
+• `Optional` **meta**: [`RouteMeta`](RouteMeta.md)
+
+Arbitrary data attached to the record.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta)
+
+___
+
+### name
+
+• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName)
+
+Name for the route record. Must be unique.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name)
+
+___
+
+### path
+
+• **path**: `string`
+
+Path of the record. Should start with `/` unless the record is the child of
+another record.
+
+**`Example`**
+
+```ts
+`/users/:id` matches `/users/1` as well as `/users/posva`.
+```
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path)
+
+___
+
+### props
+
+• `Optional` **props**: `boolean` \| `Record`\<`string`, `_RouteRecordProps`\>
+
+Allow passing down params as props to the component rendered by
+`router-view`. Should be an object with the same keys as `components` or a
+boolean to be applied to every component.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props)
+
+___
+
+### redirect
+
+• `Optional` **redirect**: `RouteRecordRedirectOption`
+
+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.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect)
+
+___
+
+### sensitive
+
+• `Optional` **sensitive**: `boolean`
+
+Makes the RegExp case-sensitive.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive)
+
+___
+
+### strict
+
+• `Optional` **strict**: `boolean`
+
+Whether to disallow a trailing slash or not.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict)
### beforeEnter %{#Properties-beforeEnter}%
-• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\>[]
+• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
被注册的 beforeEnter 守卫
### components %{#Properties-components}%
-• **components**: `undefined` \| ``null`` \| `Record`<`string`, `RawRouteComponent`\>
+• **components**: `undefined` \| ``null`` \| `Record`\<`string`, `RawRouteComponent`\>
-{@inheritDoc RouteRecordMultipleViews.components}
+Components to display when the URL matches this route. Allow using named views.
___
### instances %{#Properties-instances}%
-• **instances**: `Record`<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`<{}, {}, {}, {}, {}, {}, {}, {}, ``false``, `ComponentOptionsBase`<`any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, {}, {}, `string`\>, {}\>\>
+• **instances**: `Record`\<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`\>
<!-- TODO: translation -->
• **meta**: [`RouteMeta`](RouteMeta.md)
-{@inheritDoc _RouteRecordBase.meta}
+<!-- TODO: translation -->
+
+Arbitrary data attached to the record.
___
• **name**: `undefined` \| [`RouteRecordName`](../index.md#routerecordname)
-{@inheritDoc _RouteRecordBase.name}
+<!-- TODO: translation -->
+
+Name for the route record. Must be unique.
___
• **path**: `string`
-{@inheritDoc _RouteRecordBase.path}
+<!-- TODO: translation -->
+
+Path of the record. Should start with `/` unless the record is the child of another record.
___
### props %{#Properties-props}%
-• **props**: `Record`<`string`, `_RouteRecordProps`\>
+• **props**: `Record`\<`string`, `_RouteRecordProps`\>
+
+<!-- TODO: translation -->
-{@inheritDoc RouteRecordMultipleViews.props}
+Allow passing down params as props to the component rendered by `router-view`. Should be an object with the same keys as `components` or a boolean to be applied to every component.
___
• **redirect**: `undefined` \| `RouteRecordRedirectOption`
-{@inheritDoc _RouteRecordBase.redirect}
+<!-- TODO: translation -->
+
+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.
--- /dev/null
+---
+editLink: false
+---
+
+<!-- TODO: translation -->
+
+[API Documentation](../index.md) / RouteRecordRedirect
+
+# Interface: RouteRecordRedirect
+
+Route Record that defines a redirect. Cannot have `component` or `components`
+as it is never rendered.
+
+## Hierarchy
+
+- [`_RouteRecordBase`](RouteRecordBase.md)
+
+ ↳ **`RouteRecordRedirect`**
+
+## Properties
+
+### alias
+
+• `Optional` **alias**: `string` \| `string`[]
+
+Aliases for the record. Allows defining extra paths that will behave like a
+copy of the record. Allows having paths shorthands like `/users/:id` and
+`/u/:id`. All `alias` and `path` values must share the same params.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias)
+
+___
+
+### beforeEnter
+
+• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
+
+Before Enter guard specific to this record. Note `beforeEnter` has no
+effect if the record has a `redirect` property.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter)
+
+___
+
+### children
+
+• `Optional` **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[]
+
+Array of nested routes.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children)
+
+___
+
+### component
+
+• `Optional` **component**: `undefined`
+
+___
+
+### components
+
+• `Optional` **components**: `undefined`
+
+___
+
+### end
+
+• `Optional` **end**: `boolean`
+
+Should the RegExp match until the end by appending a `$` to it.
+
+**`Default Value`**
+
+`true`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end)
+
+___
+
+### meta
+
+• `Optional` **meta**: [`RouteMeta`](RouteMeta.md)
+
+Arbitrary data attached to the record.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta)
+
+___
+
+### name
+
+• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName)
+
+Name for the route record. Must be unique.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name)
+
+___
+
+### path
+
+• **path**: `string`
+
+Path of the record. Should start with `/` unless the record is the child of
+another record.
+
+**`Example`**
+
+```ts
+`/users/:id` matches `/users/1` as well as `/users/posva`.
+```
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path)
+
+___
+
+### props
+
+• `Optional` **props**: `undefined`
+
+Allow passing down params as props to the component rendered by `router-view`.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props)
+
+___
+
+### redirect
+
+• **redirect**: `RouteRecordRedirectOption`
+
+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.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect)
+
+___
+
+### sensitive
+
+• `Optional` **sensitive**: `boolean`
+
+Makes the RegExp case-sensitive.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive)
+
+___
+
+### strict
+
+• `Optional` **strict**: `boolean`
+
+Whether to disallow a trailing slash or not.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict)
--- /dev/null
+---
+editLink: false
+---
+
+<!-- TODO: translation -->
+
+[API Documentation](../index.md) / RouteRecordSingleView
+
+# Interface: RouteRecordSingleView
+
+Route Record defining one single component with the `component` option.
+
+## Hierarchy
+
+- [`_RouteRecordBase`](RouteRecordBase.md)
+
+ ↳ **`RouteRecordSingleView`**
+
+## Properties
+
+### alias
+
+• `Optional` **alias**: `string` \| `string`[]
+
+Aliases for the record. Allows defining extra paths that will behave like a
+copy of the record. Allows having paths shorthands like `/users/:id` and
+`/u/:id`. All `alias` and `path` values must share the same params.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias)
+
+___
+
+### beforeEnter
+
+• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
+
+Before Enter guard specific to this record. Note `beforeEnter` has no
+effect if the record has a `redirect` property.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter)
+
+___
+
+### children
+
+• `Optional` **children**: `undefined`
+
+Array of nested routes.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children)
+
+___
+
+### component
+
+• **component**: `RawRouteComponent`
+
+Component to display when the URL matches this route.
+
+___
+
+### components
+
+• `Optional` **components**: `undefined`
+
+___
+
+### end
+
+• `Optional` **end**: `boolean`
+
+Should the RegExp match until the end by appending a `$` to it.
+
+**`Default Value`**
+
+`true`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end)
+
+___
+
+### meta
+
+• `Optional` **meta**: [`RouteMeta`](RouteMeta.md)
+
+Arbitrary data attached to the record.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta)
+
+___
+
+### name
+
+• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName)
+
+Name for the route record. Must be unique.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name)
+
+___
+
+### path
+
+• **path**: `string`
+
+Path of the record. Should start with `/` unless the record is the child of
+another record.
+
+**`Example`**
+
+```ts
+`/users/:id` matches `/users/1` as well as `/users/posva`.
+```
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path)
+
+___
+
+### props
+
+• `Optional` **props**: `_RouteRecordProps`
+
+Allow passing down params as props to the component rendered by `router-view`.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props)
+
+___
+
+### redirect
+
+• `Optional` **redirect**: `undefined`
+
+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.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect)
+
+___
+
+### sensitive
+
+• `Optional` **sensitive**: `boolean`
+
+Makes the RegExp case-sensitive.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive)
+
+___
+
+### strict
+
+• `Optional` **strict**: `boolean`
+
+Whether to disallow a trailing slash or not.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict)
--- /dev/null
+---
+editLink: false
+---
+
+<!-- TODO: translation -->
+
+[API Documentation](../index.md) / RouteRecordSingleViewWithChildren
+
+# Interface: RouteRecordSingleViewWithChildren
+
+Route Record defining one single component with a nested view.
+
+## Hierarchy
+
+- [`_RouteRecordBase`](RouteRecordBase.md)
+
+ ↳ **`RouteRecordSingleViewWithChildren`**
+
+## Properties
+
+### alias
+
+• `Optional` **alias**: `string` \| `string`[]
+
+Aliases for the record. Allows defining extra paths that will behave like a
+copy of the record. Allows having paths shorthands like `/users/:id` and
+`/u/:id`. All `alias` and `path` values must share the same params.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias)
+
+___
+
+### beforeEnter
+
+• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[]
+
+Before Enter guard specific to this record. Note `beforeEnter` has no
+effect if the record has a `redirect` property.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter)
+
+___
+
+### children
+
+• **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[]
+
+Array of nested routes.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children)
+
+___
+
+### component
+
+• `Optional` **component**: ``null`` \| `RawRouteComponent`
+
+Component to display when the URL matches this route.
+
+___
+
+### components
+
+• `Optional` **components**: `undefined`
+
+___
+
+### end
+
+• `Optional` **end**: `boolean`
+
+Should the RegExp match until the end by appending a `$` to it.
+
+**`Default Value`**
+
+`true`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end)
+
+___
+
+### meta
+
+• `Optional` **meta**: [`RouteMeta`](RouteMeta.md)
+
+Arbitrary data attached to the record.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta)
+
+___
+
+### name
+
+• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName)
+
+Name for the route record. Must be unique.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name)
+
+___
+
+### path
+
+• **path**: `string`
+
+Path of the record. Should start with `/` unless the record is the child of
+another record.
+
+**`Example`**
+
+```ts
+`/users/:id` matches `/users/1` as well as `/users/posva`.
+```
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path)
+
+___
+
+### props
+
+• `Optional` **props**: `_RouteRecordProps`
+
+Allow passing down params as props to the component rendered by `router-view`.
+
+#### Overrides
+
+[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props)
+
+___
+
+### redirect
+
+• `Optional` **redirect**: `RouteRecordRedirectOption`
+
+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.
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect)
+
+___
+
+### sensitive
+
+• `Optional` **sensitive**: `boolean`
+
+Makes the RegExp case-sensitive.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive)
+
+___
+
+### strict
+
+• `Optional` **strict**: `boolean`
+
+Whether to disallow a trailing slash or not.
+
+**`Default Value`**
+
+`false`
+
+#### Inherited from
+
+[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict)
\ No newline at end of file
### currentRoute %{#Properties-currentRoute}%
-• `只读` **currentRoute**: `Ref`<[`RouteLocationNormalizedLoaded`](RouteLocationNormalizedLoaded.md)\>
+• `只读` **currentRoute**: `Ref`\<[`RouteLocationNormalizedLoaded`](RouteLocationNormalizedLoaded.md)\>
当前的 [RouteLocationNormalized](RouteLocationNormalized.md)。
添加一个导航钩子，它会在每次导航之后被执行。返回一个用来移除该钩子的函数。
-**`Example`**
-
-```js
-router.afterEach((to, from, failure) => {
- if (isNavigationFailure(failure)) {
- console.log('failed navigation', failure)
- }
-})
-```
-
#### 参数 %{#Methods-afterEach-Parameters}%
| 名称 | 类型 | 描述 |
`fn`
+a function that removes the registered hook
+
▸ (): `void`
添加一个导航钩子，它会在每次导航之后被执行。返回一个用来移除该钩子的函数。
| 名称 | 类型 | 描述 |
| :------ | :------ | :------ |
-| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> | 要加入的导航钩子 |
+| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> | 要加入的导航钩子 |
#### 返回值 %{#Methods-beforeEach-Returns}%
添加一个导航守卫，它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕，且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。
-**`Example`**
-
-```js
-router.beforeResolve(to => {
- if (to.meta.requiresAuth && !isAuthenticated) return false
-})
-```
-
#### 参数 %{#Methods-beforeResolve-Parameters}%
| 名称 | 类型 | 描述 |
| :------ | :------ | :------ |
-| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> | navigation guard to add |
+| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> | navigation guard to add |
#### 返回值 %{#Methods-beforeResolve-Returns}%
### isReady %{#Methods-isReady}%
-▸ **isReady**(): `Promise`<`void`\>
+▸ **isReady**(): `Promise`\<`void`\>
返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。如果初始导航已经发生，则该 Promise 会被立刻解析。
#### 返回值 %{#Methods-isReady-Returns}%
-`Promise`<`void`\>
+`Promise`\<`void`\>
___
| 名称 | 类型 | 描述 |
| :------ | :------ | :------ |
-| `handler` | `_ErrorHandler` | 要注册的错误处理器 |
+| `handler` | `_ErrorListener` | 要注册的错误处理器 |
#### 返回值 %{#Methods-onError-Returns}%
### push %{#Methods-push}%
-▸ **push**(`to`): `Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
+▸ **push**(`to`): `Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
程序式地通过将一条记录加入到历史栈中来导航到一个新的 URL。
#### 返回值 %{#Methods-push-Returns}%
-`Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
+`Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
___
### replace %{#Methods-replace}%
-▸ **replace**(`to`): `Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
+▸ **replace**(`to`): `Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
程序式地通过替换历史栈中的当前记录来导航到一个新的 URL。
#### 返回值 %{#Methods-replace-Returns}%
-`Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
+`Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\>
___
按指定方向访问历史。
-**`Example`**
-
-```js
-myHistory.go(-1) // equivalent to window.history.back()
-myHistory.go(1) // equivalent to window.history.forward()
-```
-
#### 参数 %{#Methods-go-Parameters}%
| 名称 | 类型 | 描述 |
`void`
+**`Example`**
+
+```js
+myHistory.go(-1) // equivalent to window.history.back()
+myHistory.go(1) // equivalent to window.history.forward()
+```
+
___
### listen %{#Methods-listen}%
▸ **replace**(`to`, `data?`): `void`
-和 [push](RouterHistory.md#push) 相同，只是执行了 `history.replaceState`
+和 [RouterHistory.push](RouterHistory.md#push) 相同，只是执行了 `history.replaceState`
以换掉 `history.pushState`。
#### 参数 %{#Methods-replace-Parameters}%
▸ (`search`): [`LocationQuery`](../index.md#locationquery)
-解析查询的自定义实现。请查阅其相关内容 [stringifyQuery](RouterOptions.md#stringifyquery)。
+解析查询的自定义实现。请查阅其相关内容 [RouterOptions.stringifyQuery](RouterOptions.md#stringifyquery)。
+
+##### 参数 %{#Properties-parseQuery-Type-declaration-Parameters}%
+
+| 名称 | 类型 |
+| :------ | :------ |
+| `search` | `string` |
+
+##### 返回值 %{#Properties-parseQuery-Type-declaration-Returns}%
+
+[`LocationQuery`](../index.md#locationquery)
**`示例`**
})
```
-##### 参数 %{#Properties-parseQuery-Type-declaration-Parameters}%
-
-| 名称 | 类型 |
-| :------ | :------ |
-| `search` | `string` |
-
-##### 返回值 %{#Properties-parseQuery-Type-declaration-Returns}%
-
-[`LocationQuery`](../index.md#locationquery)
-
___
### routes %{#Properties-routes}%
# 接口：RouterScrollBehavior
+<!-- TODO: translation -->
+
+Type of the `scrollBehavior` option that can be passed to `createRouter`.
+
## 可调用函数 %{#Callable}%
### RouterScrollBehavior %{#Callable-RouterScrollBehavior}%
-▸ **RouterScrollBehavior**(`to`, `from`, `savedPosition`): `Awaitable`<``false`` \| `void` \| `ScrollPosition`\>
+▸ **RouterScrollBehavior**(`to`, `from`, `savedPosition`): `Awaitable`\<``false`` \| `void` \| `ScrollPosition`\>
#### 参数 %{#Callable-RouterScrollBehavior-Parameters}%
#### 返回值 %{#Callable-RouterScrollBehavior-Returns}%
-`Awaitable`<``false`` \| `void` \| `ScrollPosition`\>
+`Awaitable`\<``false`` \| `void` \| `ScrollPosition`\>
title="Learn how to add routes at runtime"
/>
-对路由的添加通常是通过 [`routes` 选项](../../api/#routes)来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) )这样的应用程序可以使用它来扩展应用程序。
+对路由的添加通常是通过 `routes` 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) )这样的应用程序可以使用它来扩展应用程序。
## 添加路由
const router = createRouter({
// ...
- routes: [{ path: '/users/:id', component: UserDetails }],
+ routes: [
+ { path: '/users/:id', component: UserDetails }
+ // 或在路由定义里直接使用它
+ { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
+ ],
})
```
path: 'new',
component: PostsNew,
// 只有经过身份验证的用户才能创建帖子
- meta: { requiresAuth: true }
+ meta: { requiresAuth: true },
},
{
path: ':id',
component: PostsDetail
// 任何人都可以阅读文章
- meta: { requiresAuth: false }
+ meta: { requiresAuth: false },
}
]
}
## TypeScript
-可以通过扩展 `RouteMeta` 接口来输入 meta 字段：
+<!-- TODO: translation -->
+
+It is possible to type the meta field by extending the `RouteMeta` interface from `vue-router`:
```ts
-// typings.d.ts or router.ts
+// This can be directly added to any of your `.ts` files like `router.ts`
+// It can also be added to a `.d.ts` file. Make sure it's included in
+// project's tsconfig.json "files"
import 'vue-router'
+// To ensure it is treated as a module, add at least one `export` statement
+export {}
+
declare module 'vue-router' {
interface RouteMeta {
// 是可选的
如果你忽略第二个参数： `isNavigationFailure(failure)`，那么就只会检查这个 `failure` 是不是一个 _Navigation Failure_。
:::
+<!-- TODO: translation -->
+
+## Global navigation failures
+
+You can detect global navigation failures globally by using the [`router.afterEach()` navigation guard](./navigation-guards.md#Global-After-Hooks):
+
+```ts
+router.afterEach((to, from, failure) => {
+ if (failure) {
+ sendToAnalytics(to, from, failure)
+ }
+})
+```
+
## 鉴别导航故障
正如我们在一开始所说的，有不同的情况会导致导航的中止，所有这些情况都会导致不同的 _Navigation Failure_。它们可以用 `isNavigationFailure` 和 `NavigationFailureType` 来区分。总共有三种不同的类型：
可以返回的值如下:
- `false`: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 `from` 路由对应的地址。
-- 一个[路由地址](../../api/#routelocationraw): 通过一个路由地址重定向到一个不同的地址，如同调用 [`router.push()`](../../api/#push)，且可以传入诸如 `replace: true` 或 `name: 'home'` 之类的选项。它会中断当前的导航，同时用相同的 `from` 创建一个新导航。
+- 一个[路由地址](../../api/#routelocationraw): 通过一个路由地址重定向到一个不同的地址，如同调用 `router.push()`，且可以传入诸如 `replace: true` 或 `name: 'home'` 之类的选项。它会中断当前的导航，同时用相同的 `from` 创建一个新导航。
```js
router.beforeEach(async (to, from) => {
})
```
-如果遇到了意料之外的情况，可能会抛出一个 `Error`。这会取消导航并且调用 [`router.onError()`](../../api/#onerror) 注册过的回调。
+如果遇到了意料之外的情况，可能会抛出一个 `Error`。这会取消导航并且调用 [`router.onError()`](../../api/interfaces/Router.md#onError) 注册过的回调。
如果什么都没有，`undefined` 或返回 `true`，**则导航是有效的**，并调用下一个导航守卫
了解更多关于 navigation failures 的信息在[它的指南](./navigation-failures.md)中。
+<!-- TODO: translation -->
+
+## Global injections within guards
+
+Since Vue 3.3, it is possible to use `inject()` within navigation guards. This is useful for injecting global properties like the [pinia stores](https://pinia.vuejs.org). Anything that is provided with `app.provide()` is also accessible within `router.beforeEach()`, `router.beforeResolve()`, `router.afterEach()`:
+
+```ts
+// main.ts
+const app = createApp(App)
+app.provide('global', 'hello injections')
+
+// router.ts or main.ts
+router.beforeEach((to, from) => {
+ const global = inject('global') // 'hello injections'
+ // a pinia store
+ const userStore = useAuthStore()
+ // ...
+})
+```
+
## 路由独享的守卫
你可以直接在路由配置上定义 `beforeEnter` 守卫：
]
```
-请注意，你也可以通过使用[路径 meta 字段](./meta.md)和[全局导航守卫](#global-before-guards)来实现类似的行为。
+请注意，你也可以通过使用[路径 meta 字段](./meta.md)和全局导航守卫来实现类似的行为。
## 组件内的守卫
--- /dev/null
+<!-- TODO: translation -->
+
+# RouterView slot
+
+The RouterView component exposes a slot that can be used to render the route component:
+
+```vue-html
+<router-view v-slot="{ Component }">
+ <component :is="Component" />
+</router-view>
+```
+
+The code above is equivalent to using `<router-view />` without the slot, but the slot provides extra flexibility when we want to work with other features.
+
+## KeepAlive & Transition
+
+When working with the [KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html) component, we would usually want it to keep the route components alive, not the RouterView itself. We can achieve that by putting the KeepAlive inside the slot:
+
+```vue-html
+<router-view v-slot="{ Component }">
+ <keep-alive>
+ <component :is="Component" />
+ </keep-alive>
+</router-view>
+```
+
+Similarly, the slot allows us to use a [Transition](https://vuejs.org/guide/built-ins/transition.html) component to transition between route components:
+
+```vue-html
+<router-view v-slot="{ Component }">
+ <transition>
+ <component :is="Component" />
+ </transition>
+</router-view>
+```
+
+We can also use KeepAlive inside a Transition:
+
+```vue-html
+<router-view v-slot="{ Component }">
+ <transition>
+ <keep-alive>
+ <component :is="Component" />
+ </keep-alive>
+ </transition>
+</router-view>
+```
+
+For more information about using RouterView with the Transition component, see the [Transitions](./transitions) guide.
+
+## Passing props and slots
+
+We can use the slot to pass props or slots to the route component:
+
+```vue-html
+<router-view v-slot="{ Component }">
+ <component :is="Component" some-prop="a value">
+ <p>Some slotted content</p>
+ </component>
+</router-view>
+```
+
+In practice, this usually isn't something you would want to do, as the route components would **all need to use the same props and slots**. See [Passing Props to Route Components](../essentials/passing-props) for other ways to pass props.
+
+## Template refs
+
+Using the slot allows us to put a [template ref](https://vuejs.org/guide/essentials/template-refs.html) directly on the route component:
+
+```vue-html
+<router-view v-slot="{ Component }">
+ <component :is="Component" ref="mainContent" />
+</router-view>
+```
+
+If we put the ref on the `<router-view>` instead then the ref would be populated with the RouterView instance, rather than the route component.
// 也可以这么写
// el: document.getElementById('main'),
el: '#main',
- top: -10,
+ // 在元素上 10 像素
+ top: 10,
}
},
})
title="Learn about route transitions"
/>
-想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](/guide/advanced/composition-api#uselink)：
+想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [`<RouterView>` 插槽](./router-view-slot)：
-```vue-html
+```html
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
]
```
-```vue-html
+```html
<router-view v-slot="{ Component, route }">
<!-- 使用任何自定义过渡和回退到 `fade` -->
<transition :name="route.meta.transition || 'fade'">
也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：
-```vue-html
+```html
<!-- 使用动态过渡名称 -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition">
它在内部传递的实际 URL 之前使用了一个哈希字符（`#`）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，**它在 SEO 中确实有不好的影响**。如果你担心这个问题，可以使用 HTML5 模式。
+<!-- TODO: translation -->
+
+## Memory mode
+
+The memory history mode doesn't assume a browser environment and therefore doesn't interact with the URL **nor automatically triggers the initial navigation**. This makes it perfect for Node environment and SSR. It is created with `createMemoryHistory()` and **requires you to push the initial navigation** after calling `app.use(router)`.
+
+```js
+import { createRouter, createMemoryHistory } from 'vue-router'
+const router = createRouter({
+ history: createMemoryHistory(),
+ routes: [
+ //...
+ ],
+})
+```
+
+While it's not recommended, you can use this mode inside Browser applications but note **there will be no history**, meaning you won't be able to go _back_ or _forward_.
+
## HTML5 模式
用 `createWebHistory()` 创建 HTML5 模式，推荐使用这个模式：
</IfModule>
```
-也可以使用 [`FallbackResource`](https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource) 代替 `mod_rewrite`。
+也可以使用 [`FallbackResource`](https://httpd.apache.org/docs/2.4/mod/mod_dir.html#fallbackresource) 代替 `mod_rewrite`。
### nginx
要链接到一个命名的路由，可以向 `router-link` 组件的 `to` 属性传递一个对象：
-```vue-html
+```html
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>
在这两种情况下，路由将导航到路径 `/user/erina`。
完整的例子在[这里](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js).
+
+<!-- TODO: translation -->
+
+Each name **must be unique** across all routes. If you add the same name to multiple routes, the router will only keep the last one. You can read more about this [in the Dynamic Routing](../advanced/dynamic-routing.md#Removing-routes) section.
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 `sidebar` (侧导航) 和 `main` (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 `router-view` 没有设置名字，那么默认为 `default`。
-```vue-html
+```html
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>
`UserSettings` 组件的 `<template>` 部分应该是类似下面的这段代码:
-```vue-html
+```html
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
## 导航到不同的位置
-**注意：在 Vue 实例中，你可以通过 `$router` 访问路由实例。因此你可以调用 `this.$router.push`。**
+<!-- TODO: translation -->
+<!-- **注意：在 Vue 实例中，你可以通过 `$router` 访问路由实例。因此你可以调用 `this.$router.push`。** -->
+**Note: The examples below refer to the router instance as `router`. Inside a component, you can access the router using the `$router` property, e.g. `this.$router.push(...)`. If you're using the Composition API, the router is accessible by calling [`useRouter()`](../advanced/composition-api).**
想要导航到不同的 URL，可以使用 `router.push` 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
router.push({ path: '/user', params: { username } }) // -> /user
```
-当指定 `params` 时，可提供 `string` 或 `number` 参数（或者对于[可重复的参数](./route-matching-syntax.md#repeatable-params)可提供一个数组）。**任何其他类型（如 `undefined`、`false` 等）都将被自动字符串化**。对于[可选参数](./route-matching-syntax.md#repeatable-params)，你可以提供一个空字符串（`""`）来跳过它。
+当指定 `params` 时，可提供 `string` 或 `number` 参数（或者对于[可重复的参数](./route-matching-syntax.md#repeatable-params)可提供一个数组）。**任何其他类型（如对象、布尔等）都将被自动字符串化**。对于[可选参数](./route-matching-syntax.md#repeatable-params)，你可以提供一个空字符串（`""`）或 `null` 来移除它。
由于属性 `to` 与 `router.push` 接受的对象种类相同，所以两者的规则完全相同。
| --------------------------------- | --------------------- |
| `<router-link :to="..." replace>` | `router.replace(...)` |
-也可以直接在传递给 `router.push` 的 `routeLocation` 中增加一个属性 `replace: true` ：
+也可以直接在传递给 `router.push` 的 `to` 参数中增加一个属性 `replace: true` ：
```js
router.push({ path: '/home', replace: true })
因此，如果你已经熟悉 [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API)，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。
-值得一提的是，无论在创建路由器实例时传递什么样的 [`history` 配置](../../api/#history)，Vue Router 的导航方法( `push`、`replace`、`go` )都能始终正常工作。
+值得一提的是，无论在创建路由器实例时传递什么 `history` 配置，Vue Router 的导航方法 (`push`、`replace`、`go`) 都能始终正常工作。
URL `/search?q=vue` 将传递 `{query: 'vue'}` 作为 props 传给 `SearchUser` 组件。
请尽可能保持 `props` 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。
+
+<!-- TODO: translation -->
+
+## Via RouterView
+
+You can also pass any props via the [`<RouterView>` slot](../advanced/router-view-slot):
+
+```vue-html
+<RouterView v-slot="{ Component }">
+ <component
+ :is="Component"
+ view-prop="value"
+ />
+</RouterView>
+```
+
+::: warning
+In this case, **all view components** will receive `view-prop`. This is usually not a good idea as it means that all of the view components have declared a `view-prop` prop, which is not necessarily true. If possible, use any of the options above.
+:::
### `router-view`
-`router-view` 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
+`router-view` 将显示与 URL 对应的组件。你可以把它放在任何地方，以适应你的布局。
## JavaScript
**原因**：Vue Router 不再使用 `path-to-regexp`，而是实现了自己的解析系统，允许路由排序并实现动态路由。由于我们通常在每个项目中只添加一个通配符路由，所以支持 `*` 的特殊语法并没有太大的好处。参数的编码是跨路由的，无一例外，让事情更容易预测。
+<!-- TODO: translation -->
+
+### The `currentRoute` property is now a `ref()`
+
+Previously the properties of the [`currentRoute`](https://v3.router.vuejs.org/api/#router-currentroute) object on a router instance could be accessed directly.
+
+With the introduction of vue-router v4, the underlying type of the `currentRoute` object on the router instance has changed to `Ref<RouteLocationNormalizedLoaded>`, which comes from the newer [reactivity fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) introduced in Vue 3.
+
+While this doesn't change anything if you're reading the route with `useRoute()` or `this.$route`, if you're accessing it directly on the router instance, you will need to access the actual route object via `currentRoute.value`:
+
+```ts
+const { page } = router.currentRoute.query // [!code --]
+const { page } = router.currentRoute.value.query // [!code ++]
+```
+
### 将 `onReady` 改为 `isReady`
现有的 `router.onReady()` 函数已被 `router.isReady()` 取代，该函数不接受任何参数并返回一个 Promise：
<!--/email_off-->
-## npm
+<!-- TODO: translation -->
-```bash
+This will expose Vue Router via a global `VueRouter` object, e.g. `VueRouter.createRouter(...)`.
+
+## Package managers
+
+If you have an existing project that uses a JavaScript package manager, you can install Vue Router from the npm registry:
+
+::: code-group
+
+```bash [npm]
npm install vue-router@4
```
-## yarn
-
-```bash
+```bash [yarn]
yarn add vue-router@4
-```
\ No newline at end of file
+```
+
+```bash [pnpm]
+pnpm add vue-router@4
+```
+
+:::
+
+If you're starting a new project, you might find it easier to use the [create-vue](https://github.com/vuejs/create-vue) scaffolding tool, which creates a Vite-based project with the option to include Vue Router:
+
+::: code-group
+
+```bash [npm]
+npm create vue@latest
+```
+
+```bash [yarn]
+yarn create vue
+```
+
+```bash [pnpm]
+pnpm create vue
+```
+
+:::
+
+You'll be prompted with some questions about the kind of project you want to create. If you choose to install Vue Router, the example application will also demonstrate some of Vue Router's core features.
+
+Projects using package managers will typically use ES modules to access Vue Router, e.g. `import { createRouter } from 'vue-router'`.
projects / thirdparty / vuejs / router.git / commitdiff
