],
},
},
-
- // '/es/': {
- // nav: [
- // {
- // text: 'Guía',
- // link: '/guide/',
- // },
- // {
- // text: 'API',
- // link: '/api/',
- // },
- // {
- // text: 'Cambios',
- // link:
- // 'https://github.com/vuejs/vue-router-next/blob/master/CHANGELOG.md',
- // },
- // ],
- // },
},
}
When a `<router-view>` has a `name`, it will render the component with the corresponding name in the matched route record's `components` option.
-- **See Also**: [Named Views](/guide/essentials/named-views.md)
+- **See Also**: [Named Views](../guide/essentials/named-views.md)
### route
Route record that can be provided by the user when adding routes via the [`routes` option](#routeroptions) or via [`router.addRoutes()`](#addroutes). There are three different kind of route records:
- Single views records: have a `component` option
-- Multiple views records ([named views](/guide/essentials/named-views.md)): have a `components` option
+- Multiple views records ([named views](../guide/essentials/named-views.md)): have a `components` option
- Redirect records: cannot have `component` or `components` option because a redirect record is never reached.
### path
Path of the record. Should start with `/` unless the record is the child of another record.
Can define parameters: `/users/:id` matches `/users/1` as well as `/users/posva`.
-- **See Also**: [Dynamic Route Matching](/guide/essentials/dynamic-matching.md)
+- **See Also**: [Dynamic Route Matching](../guide/essentials/dynamic-matching.md)
### redirect
Nested routes of the current record.
-- **See Also**: [Nested Routes](/guide/essentials/nested-routes.md)
+- **See Also**: [Nested Routes](../guide/essentials/nested-routes.md)
### alias
Allows passing down params as props to the component rendered by `router-view`. When passed to a _multiple views record_, it should be an object with the same keys as `components` or a `boolean` to be applied to each component.
target location.
-- **See Also**: [Passing props to Route Components](/guide/essentials/passing-props.md)
+- **See Also**: [Passing props to Route Components](../guide/essentials/passing-props.md)
### meta
Custom data attached to the record.
-- **See Also**: [Meta fields](/guide/advanced/meta.md)
+- **See Also**: [Meta fields](../guide/advanced/meta.md)
## RouteRecordNormalized
Navigation guard applied when entering this record from somewhere else.
-- **See Also**: [Navigation guards](/guide/advanced/navigation-guards.md)
+- **See Also**: [Navigation guards](../guide/advanced/navigation-guards.md)
### children
Arbitrary data attached to the record.
-- **See also**: [Meta fields](/guide/advanced/meta.md)
+- **See also**: [Meta fields](../guide/advanced/meta.md)
### name
## RouteLocationRaw
-User-level route location that can be passed to `router.push()`, `redirect`, and returned in [Navigation Guards](/guide/advanced/navigation-guards.md).
+User-level route location that can be passed to `router.push()`, `redirect`, and returned in [Navigation Guards](../guide/advanced/navigation-guards.md).
A raw location can either be a `string` like `/users/posva#bio` or an object:
Arbitrary data attached to all matched records merged (non recursively) from parent to child.
-- **See also**: [Meta fields](/guide/advanced/meta.md)
+- **See also**: [Meta fields](../guide/advanced/meta.md)
### name
Type of the navigation failure.
-- **See Also**: [Navigation Failures](/guide/advanced/navigation-failures.md)
+- **See Also**: [Navigation Failures](../guide/advanced/navigation-failures.md)
## NavigationGuard
- [`RouteLocationRaw`](#routelocationraw): redirects to a different location
- `(vm: ComponentPublicInstance) => any` **only for `beforeRouteEnter`**: A callback to be executed once the navigation completes. Receives the route component instance as the parameter.
-- **See Also**: [Navigation Guards](/guide/advanced/navigation-guards.md)
+- **See Also**: [Navigation Guards](../guide/advanced/navigation-guards.md)
## Component Injections
- **beforeRouteUpdate**
- **beforeRouteLeave**
-See [In Component Guards](/guide/advanced/navigation-guards.md#in-component-guards).
+See [In Component Guards](../guide/advanced/navigation-guards.md#in-component-guards).
## `useLink`
-Vue Router exposes the internal behavior of RouterLink as a Composition API function. It gives access the same properties as the [`v-slot` API](/api/#router-link-s-v-slot):
+Vue Router exposes the internal behavior of RouterLink as a Composition API function. It gives access the same properties as the [`v-slot` API](../../api/#router-link-s-v-slot):
```js
import { RouterLink, useLink } from 'vue-router'
# Dynamic Routing
-Adding routes to your router is usually done via the [`routes` option](/api/#routes) but in some situations, you might want to add or remove routes while the application is already running. Application with extensible interfaces like [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) can use this to make the application grow.
+Adding routes to your router is usually done via the [`routes` option](../../api/#routes) but in some situations, you might want to add or remove routes while the application is already running. Application with extensible interfaces like [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) can use this to make the application grow.
## Adding Routes
Vue Router gives you two functions to look at existing routes:
-- [`router.hasRoute()`](/api/#hasroute): check if a route exists
-- [`router.getRoutes()`](/api/#getroutes): get an array with all the route records.
+- [`router.hasRoute()`](../../api/#hasroute): check if a route exists
+- [`router.getRoutes()`](../../api/#getroutes): get an array with all the route records.
Every guard function receives two arguments:
-- **`to`**: the target route location [in a normalized format](/api/#routelocationnormalized) being navigated to.
-- **`from`**: the current route location [in a normalized format](/api/#routelocationnormalized) being navigated away from.
+- **`to`**: the target route location [in a normalized format](../../api/#routelocationnormalized) being navigated to.
+- **`from`**: the current route location [in a normalized format](../../api/#routelocationnormalized) being navigated away from.
And can optionally return any of the following values:
- `false`: cancel the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the `from` route.
-- A [Route Location](/api/#routelocationraw): Redirect to a different location by passing a route location as if you were calling [`router.push()`](/api/#push), which allows you to pass options like `replace: true` or `name: 'home'`. The current navigation is dropped and a new one is created with the same `from`.
+- A [Route Location](../../api/#routelocationraw): Redirect to a different location by passing a route location as if you were calling [`router.push()`](../../api/#push), which allows you to pass options like `replace: true` or `name: 'home'`. The current navigation is dropped and a new one is created with the same `from`.
-It's also possible to throw an `Error` if an unexpected situation was met. This will also cancel the navigation and call any callback registered via [`router.onError()`](/api/#onerror).
+It's also possible to throw an `Error` if an unexpected situation was met. This will also cancel the navigation and call any callback registered via [`router.onError()`](../../api/#onerror).
If nothing, `undefined` or `true` is returned, **the navigation is validated**, and the next navigation guard is called.
# Transitions
-In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](/api/#router-view-s-v-slot):
+In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](../../api/#router-view-s-v-slot):
```html
<router-view v-slot="{ Component }">
| /users/:username | /users/eduardo | `{ username: 'eduardo' }` |
| /users/:username/posts/:postId | /users/eduardo/posts/123 | `{ username: 'eduardo', postId: '123' }` |
-In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](/api/#routelocationnormalized).
+In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](../../api/#routelocationnormalized).
A working demo of this example can be found [here](https://codesandbox.io/s/route-params-vue-router-examples-mlb14?from-embed&initialpath=%2Fusers%2Feduardo%2Fposts%2F1).
]
```
-In this specific scenario we are using a [custom regexp](/guide/essentials/route-matching-syntax.md#custom-regexp-in-params) between parentheses and marking the `pathMatch` param as [optionally repeatable](/guide/essentials/route-matching-syntax.md#optional-parameters). This allows us to directly navigate to the route if we need to by splitting the `path` into an array:
+In this specific scenario we are using a [custom regexp](./route-matching-syntax.md#custom-regexp-in-params) between parentheses and marking the `pathMatch` param as [optionally repeatable](./route-matching-syntax.md#optional-parameters). This allows us to directly navigate to the route if we need to by splitting the `path` into an array:
```js
this.$router.push({
})
```
-See more in the [repeated params](/guide/essentials/route-matching-syntax.md#repeatable-params) section.
+See more in the [repeated params](./route-matching-syntax.md#repeatable-params) section.
If you are using [History mode](./history-mode.md), make sure to follow the instructions to correctly configure your server as well.
## Example Server Configurations
-**Note**: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use [the `publicPath` option of Vue CLI](https://cli.vuejs.org/config/#publicpath) and the related [`base` property of the router](/api/#createwebhistory). You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing `RewriteBase /` with `RewriteBase /name-of-your-subfolder/`).
+**Note**: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use [the `publicPath` option of Vue CLI](https://cli.vuejs.org/config/#publicpath) and the related [`base` property of the router](../../api/#createwebhistory). You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing `RewriteBase /` with `RewriteBase /name-of-your-subfolder/`).
### Apache
Since the prop `to` accepts the same kind of object as `router.push`, the exact same rules apply to both of them.
-`router.push` and all the other navigation methods return a _Promise_ that allows us to wait til the navigation is finished and to know if it succeeded or failed. We will talk more about that in [Navigation Handling](../advanced/navigation-handling.md).
+`router.push` and all the other navigation methods return a _Promise_ that allows us to wait til the navigation is finished and to know if it succeeded or failed. We will talk more about that in [Navigation Handling](../advanced/navigation-failures.md).
## Replace current location
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](/api/#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.
}
```
-To access the router or the route inside the `setup` function, call the `useRouter` or `useRoute` functions. We will learn more about this in [the Composition API](/guide/advanced/composition-api.md#accessing-the-router-and-current-route-inside-setup)
+To access the router or the route inside the `setup` function, call the `useRouter` or `useRoute` functions. We will learn more about this in [the Composition API](./advanced/composition-api.md#accessing-the-router-and-current-route-inside-setup)
Throughout the docs, we will often use the `router` instance. Keep in mind that `this.$router` is exactly the same as directly using the `router` instance created through `createRouter`. The reason we use `this.$router` is because we don't want to import the router in every single component that needs to manipulate routing.
### Removal of `event` and `tag` props in `<router-link>`
-Both `event`, and `tag` props have been removed from `<router-link>`. You can use the [`v-slot` API](/api/#router-link-s-v-slot) to fully customize `<router-link>`:
+Both `event`, and `tag` props have been removed from `<router-link>`. You can use the [`v-slot` API](../../api/#router-link-s-v-slot) to fully customize `<router-link>`:
```html
replace
### Removal of `router.match` and changes to `router.resolve`
-Both `router.match`, and `router.resolve` have been merged together into `router.resolve` with a slightly different signature. [Refer to the API](/api/#resolve) for more details.
+Both `router.match`, and `router.resolve` have been merged together into `router.resolve` with a slightly different signature. [Refer to the API](../../api/#resolve) for more details.
**Reason**: Uniting multiple methods that were used for the same purpose.
component: DashboardParent,
children: [
{ path: '', name: 'dashboard', component: DashboardDefault },
- { path: 'settings', name: 'dashboard-settings', component: DashboardSettings },
+ {
+ path: 'settings',
+ name: 'dashboard-settings',
+ component: DashboardSettings,
+ },
],
},
]
Note this will work if `path` was `/parent/` as the relative location `home` to `/parent/` is indeed `/parent/home` but the relative location of `home` to `/parent` is `/home`.
-<!-- Learn more about relative links [in the cookbook](/cookbook/relative-links.md). -->
+<!-- Learn more about relative links [in the cookbook](../../cookbook/relative-links.md). -->
**Reason**: This is to make trailing slash behavior consistent: by default all routes allow a trailing slash. It can be disabled by using the `strict` option and manually appending (or not) a slash to the routes.
Decoded values in `params`, `query`, and `hash` are now consistent no matter where the navigation is initiated (older browsers will still produce unencoded `path` and `fullPath`). The initial navigation should yield the same results as in-app navigations.
-Given any [normalized route location](/api/#routelocationnormalized):
+Given any [normalized route location](../../api/#routelocationnormalized):
- Values in `path`, `fullPath` are not decoded anymore. They will appear as provided by the browser (most browsers provide them encoded). e.g. directly writing on the address bar `https://example.com/hello world` will yield the encoded version: `https://example.com/hello%20world` and both `path` and `fullPath` will be `/hello%20world`.
-- `hash` is now decoded, that way it can be copied over: `router.push({ hash: $route.hash })` and be used directly in [scrollBehavior](/api/#scrollbehavior)'s `el` option.
+- `hash` is now decoded, that way it can be copied over: `router.push({ hash: $route.hash })` and be used directly in [scrollBehavior](../../api/#scrollbehavior)'s `el` option.
- When using `push`, `resolve`, and `replace` and providing a `string` location or a `path` property in an object, **it must be encoded** (like in the previous version). On the other hand, `params`, `query` and `hash` must be provided in its unencoded version.
- The slash character (`/`) is now properly decoded inside `params` while still producing an encoded version on the URL: `%2F`.
Some of new features to keep an eye on in Vue Router 4 include:
-- [Dynamic Routing](/api/#addroute-2)
-- [Composition API](/guide/advanced/composition-api.md)
+- [Dynamic Routing](../../api/#addroute-2)
+- [Composition API](../advanced/composition-api.md)
<!-- - Custom History implementation -->
- Customizable Scroll Behavior
- Proper encoding for URLs
-[Get started](/guide/) or play with the [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (see [`README.md`](https://github.com/vuejs/vue-router-next) to run them).
+[Get started](./guide/) or play with the [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (see [`README.md`](https://github.com/vuejs/vue-router-next) to run them).
<HomeSponsors />
如果 `<router-view>` 设置了 `name`，则会渲染对应的路由配置中 `components` 下的相应组件。
-- **更多的内容请看**：[命名视图](/zh/guide/essentials/named-views.md)
+- **更多的内容请看**：[命名视图](../guide/essentials/named-views.md)
### route
## createWebHashHistory
-创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 `file://`)，或当配置服务器不能处理任意URL时这非常有用。**注意：如果 SEO 对你很重要，你应该使用 [`createWebHistory`](#createwebhistory)**。
+创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 `file://`)，或当配置服务器不能处理任意 URL 时这非常有用。**注意：如果 SEO 对你很重要，你应该使用 [`createWebHistory`](#createwebhistory)**。
**函数签名：**
当用户通过 [`routes` option](#routeroptions) 或者 [`router.addRoutes()`](#addroutes) 来添加路由时，可以得到路由记录。 有三种不同的路由记录:
- 单一视图记录：有一个 `component` 配置
-- 多视图记录 ([命名视图](/zh/guide/essentials/named-views.md)) ：有一个 `components` 配置
+- 多视图记录 ([命名视图](../guide/essentials/named-views.md)) ：有一个 `components` 配置
- 重定向记录：没有 `component` 或 `components` 配置，因为重定向记录永远不会到达。
### path
记录的路径。应该以 `/` 开头，除非该记录是另一条记录的子记录。可以定义参数：`/users/:id` 匹配 `/users/1` 以及 `/users/posva`。
-- **更多的内容请看**：[动态路由匹配](/zh/guide/essentials/dynamic-matching.md)
+- **更多的内容请看**：[动态路由匹配](../guide/essentials/dynamic-matching.md)
### redirect
当前记录的嵌套路由。
-- **更多的内容请看**：[Nested Routes](/zh/guide/essentials/nested-routes.md)
+- **更多的内容请看**：[Nested Routes](../guide/essentials/nested-routes.md)
### alias
允许将参数作为 props 传递给由 `router-view` 渲染的组件。当传递给一个*多视图记录*时，它应该是一个与`组件`具有相同键的对象，或者是一个应用于每个组件的`布尔值`。
-- **更多的内容请看**：[给路由组件传 props](/zh/guide/essentials/passing-props.md)
+- **更多的内容请看**：[给路由组件传 props](../guide/essentials/passing-props.md)
### meta
在记录上附加自定义数据。
-- **更多的内容请看**：[Meta 字段](/zh/guide/advanced/meta.md)
+- **更多的内容请看**：[Meta 字段](../guide/advanced/meta.md)
## RouteRecordNormalized
当从其他地方进入此记录时，导航守卫会被应用。
-- **更多的内容请看**：[导航守卫](/zh/guide/advanced/navigation-guards.md)
+- **更多的内容请看**：[导航守卫](../guide/advanced/navigation-guards.md)
### children
附在记录上的任意数据。
-- **更多的内容请看**：[Meta 字段](/zh/guide/advanced/meta.md)
+- **更多的内容请看**：[Meta 字段](../guide/advanced/meta.md)
### name
## RouteLocationRaw
-用户级的路由地址，可以传递给 `router.push()`，`redirect`，并在[导航守卫](/zh/guide/advanced/navigation-guards.md)中返回。
+用户级的路由地址，可以传递给 `router.push()`，`redirect`，并在[导航守卫](../guide/advanced/navigation-guards.md)中返回。
原始位置可以是一个 `字符串`，比如 `/users/posva#bio`，也可以是一个对象：
附加到从父级到子级合并（非递归）的所有匹配记录的任意数据。
-- **更多的内容请看**：[Meta 字段](/zh/guide/advanced/meta.md)
+- **更多的内容请看**：[Meta 字段](../guide/advanced/meta.md)
### name
导航失败的类型
-- **更多的内容请看**：[Navigation Failures](/zh/guide/advanced/navigation-failures.md)
+- **更多的内容请看**：[Navigation Failures](../guide/advanced/navigation-failures.md)
## NavigationGuard
- [`RouteLocationRaw`](#routelocationraw): 重定向到一个不同的位置
- `(vm: ComponentPublicInstance) => any` **仅适用于 `beforeRouteEnter`**：导航完成后执行的回调。接收路由组件实例作为参数。
-- **更多的内容请看**：[导航守卫](/zh/guide/advanced/navigation-guards.md)
+- **更多的内容请看**：[导航守卫](../guide/advanced/navigation-guards.md)
## Component Injections
- **beforeRouteUpdate**
- **beforeRouteLeave**
-请看[组件内的守卫](/zh/guide/advanced/navigation-guards.md#组件内的守卫)。
+请看[组件内的守卫](../guide/advanced/navigation-guards.md#组件内的守卫)。
## `useLink`
-Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。它提供了与 [`v-slot` API](/zh/api/#router-link-s-v-slot) 相同的访问属性：
+Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。它提供了与 [`v-slot` API](../../api/#router-link-s-v-slot) 相同的访问属性：
```js
import { RouterLink, useLink } from 'vue-router'
# 动态路由
-添加路由到你的路由上通常是通过 [`routes` 配置](/zh/api/#routes)来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) )这样的应用程序可以使用它来扩展应用程序。
+添加路由到你的路由上通常是通过 [`routes` 配置](../../api/#routes)来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) )这样的应用程序可以使用它来扩展应用程序。
## 添加路由
记住，如果你需要等待新的路由显示，可以使用 `await router.replace()`。
-
## 在导航守卫中添加路由
如果你决定在导航守卫内部添加或删除路由，你不应该调用 `router.replace()`，而是通过返回新的位置来触发重定向：
## 查看现有路由
-Vue Router提供了两个功能来查看现有的路由：
+Vue Router 提供了两个功能来查看现有的路由：
-- [`router.hasRoute()`](/zh/api/#hasroute)：检查路由是否存在。
-- [`router.getRoutes()`](/zh/api/#getroutes)：获取一个包含所有路由记录的数组。
+- [`router.hasRoute()`](../../api/#hasroute)：检查路由是否存在。
+- [`router.getRoutes()`](../../api/#getroutes)：获取一个包含所有路由记录的数组。
每个守卫方法接收两个参数：
-- **`to`**: 即将要进入的目标 [用一种标准化的方式](/zh/api/#routelocationnormalized)
-- **`from`**: 当前导航正要离开的路由 [用一种标准化的方式](/zh/api/#routelocationnormalized)
+- **`to`**: 即将要进入的目标 [用一种标准化的方式](../../api/#routelocationnormalized)
+- **`from`**: 当前导航正要离开的路由 [用一种标准化的方式](../../api/#routelocationnormalized)
可以返回的值如下:
- `false`: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 `from` 路由对应的地址。
-- 一个[路由地址](/zh/api/#routelocationraw): 通过一个路由地址跳转到一个不同的地址，就像你调用 [`router.push()`](/zh/api/#push) 一样，你可以设置诸如 `replace: true` 或 `name: 'home'` 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 `from` 一样。
+- 一个[路由地址](../../api/#routelocationraw): 通过一个路由地址跳转到一个不同的地址，就像你调用 [`router.push()`](../../api/#push) 一样，你可以设置诸如 `replace: true` 或 `name: 'home'` 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 `from` 一样。
-如果遇到了意料之外的情况，可能会抛出一个 `Error`。这会取消导航并且调用 [`router.onError()`](/zh/api/#onerror) 注册过的回调。
+如果遇到了意料之外的情况，可能会抛出一个 `Error`。这会取消导航并且调用 [`router.onError()`](../../api/#onerror) 注册过的回调。
如果什么都没有，`undefined` 或返回 `true`，**则导航是有效的**，并调用下一个导航守卫
# 过渡动效
-想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](/zh/api/#router-view-s-v-slot)：
+想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](../../api/#router-view-s-v-slot)：
```html
<router-view v-slot="{ Component }">
你可以在同一个路由中设置有多个 _路径参数_，它们会映射到 `$route.params` 上的相应字段。例如：
-| 匹配模式 | 匹配路径 | \$route.params |
+| 匹配模式 | 匹配路径 | \$route.params |
| ------------------------------ | ------------------------ | ---------------------------------------- |
| /users/:username | /users/eduardo | `{ username: 'eduardo' }` |
| /users/:username/posts/:postId | /users/eduardo/posts/123 | `{ username: 'eduardo', postId: '123' }` |
-除了 `$route.params` 之外，`$route` 对象还公开了其他有用的信息，如 `$route.query`（如果 URL 中存在参数）、`$route.hash` 等。你可以在 [API 参考](/zh/api/#routelocationnormalized)中查看完整的细节。
+除了 `$route.params` 之外，`$route` 对象还公开了其他有用的信息，如 `$route.query`（如果 URL 中存在参数）、`$route.hash` 等。你可以在 [API 参考](../../api/#routelocationnormalized)中查看完整的细节。
这个例子的 demo 可以在[这里](https://codesandbox.io/s/route-params-vue-router-examples-mlb14?from-embed&initialpath=%2Fusers%2Feduardo%2Fposts%2F1)找到。
]
```
-在这个特定的场景中，我们在括号之间使用了[自定义正则表达式](/zh/guide/essentials/route-matching-syntax.md#在参数中自定义正则)，并将`pathMatch` 参数标记为[可选可重复](/zh/guide/essentials/route-matching-syntax.md#可选参数)。这样做是为了让我们在需要的时候，可以通过将 `path` 拆分成一个数组，直接导航到路由：
+在这个特定的场景中，我们在括号之间使用了[自定义正则表达式](./route-matching-syntax.md#在参数中自定义正则)，并将`pathMatch` 参数标记为[可选可重复](./route-matching-syntax.md#可选参数)。这样做是为了让我们在需要的时候，可以通过将 `path` 拆分成一个数组，直接导航到路由：
```js
this.$router.push({
})
```
-更多内容请参见[重复参数](/zh/guide/essentials/route-matching-syntax.md#可重复的参数)部分。
+更多内容请参见[重复参数](./route-matching-syntax.md#可重复的参数)部分。
如果你正在使用[历史模式](./history-mode.md)，请务必按照说明正确配置你的服务器。
})
```
-它在内部传递的实际 URL 之前使用了一个哈希字符（`#`）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，**它在SEO中确实有不好的影响**。如果你担心这个问题，可以使用 HTML5 模式。
+它在内部传递的实际 URL 之前使用了一个哈希字符（`#`）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，**它在 SEO 中确实有不好的影响**。如果你担心这个问题，可以使用 HTML5 模式。
## HTML5 模式
## 服务器配置示例
-**注意**：以下示例假定你正在从根目录提供服务。如果你部署到子目录，你应该使用[Vue CLI的 `publicPath` 配置](https://cli.vuejs.org/config/#publicpath)和相关的[路由器的 `base` 属性](/zh/api/#createwebhistory)。你还需要调整下面的例子，以使用子目录而不是根目录（例如，将`RewriteBase/` 替换为 `RewriteBase/name-of-your-subfolder/`）。
+**注意**：以下示例假定你正在从根目录提供服务。如果你部署到子目录，你应该使用[Vue CLI 的 `publicPath` 配置](https://cli.vuejs.org/config/#publicpath)和相关的[路由器的 `base` 属性](../../api/#createwebhistory)。你还需要调整下面的例子，以使用子目录而不是根目录（例如，将`RewriteBase/` 替换为 `RewriteBase/name-of-your-subfolder/`）。
### Apache
```
也可以使用 [`FallbackResource`](https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource) 代替 `mod_rewrite`。
+
### nginx
```nginx
当你点击 `<router-link>` 时，内部会调用这个方法，所以点击 `<router-link :to="...">` 相当于调用 `router.push(...)` ：
-| 声明式 | 编程式 |
+| 声明式 | 编程式 |
| ------------------------- | ------------------ |
| `<router-link :to="...">` | `router.push(...)` |
由于属性 `to` 与 `router.push` 接受的对象种类相同，所以两者的规则完全相同。
-`router.push` 和所有其他导航方法都会返回一个 _Promise_，让我们可以等到导航完成后才知道是成功还是失败。我们将在 [Navigation Handling](../advanced/navigation-handling.md) 中详细介绍。
+`router.push` 和所有其他导航方法都会返回一个 _Promise_，让我们可以等到导航完成后才知道是成功还是失败。我们将在 [Navigation Handling](../advanced/navigation-failures.md) 中详细介绍。
## 替换当前位置
它的作用类似于 `router.push`，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
-| 声明式 | 编程式 |
+| 声明式 | 编程式 |
| --------------------------------- | --------------------- |
| `<router-link :to="..." replace>` | `router.replace(...)` |
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
-// 返回一条记录，与router.back() 相同
+// 返回一条记录，与router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
-// 如果没有那么多记录，静默失败
+// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
```
因此，如果你已经熟悉 [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API)，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。
-值得一提的是，无论在创建路由器实例时传递什么样的[`history` 配置](/zh/api/#history)，Vue Router 的导航方法(`push`、`replace`、`go`)都能始终如一地工作。
+值得一提的是，无论在创建路由器实例时传递什么样的[`history` 配置](../../api/#history)，Vue Router 的导航方法(`push`、`replace`、`go`)都能始终如一地工作。
}
```
-要在 `setup` 函数中访问路由，请调用 `useRouter` 或 `useRoute` 函数。我们将在 [Composition API](/zh/guide/advanced/composition-api.md#在-setup-中访问路由和当前路由) 中了解更多信息。
+要在 `setup` 函数中访问路由，请调用 `useRouter` 或 `useRoute` 函数。我们将在 [Composition API](./advanced/composition-api.md#在-setup-中访问路由和当前路由) 中了解更多信息。
在整个文档中，我们会经常使用 `router` 实例，请记住，`this.$router` 与直接使用通过 `createRouter` 创建的 `router` 实例完全相同。我们使用 `this.$router` 的原因是，我们不想在每个需要操作路由的组件中都导入路由。
如果你不打算使用其名称直接跳转到未找到的路由，则无需为重复的参数添加 `*`。如果你调用 `router.push('/not/found/url')`，它将提供正确的 `pathMatch` 参数。
:::
-
**原因**：Vue Router 不再使用 `path-to-regexp`，而是实现了自己的解析系统，允许路由排序并实现动态路由。由于我们通常在每个项目中只添加一个通配符路由，所以支持 `*` 的特殊语法并没有太大的好处。参数的编码是跨路由的，无一例外，让事情更容易预测。
### 将 `onReady` 改为 `isReady`
### 删除 `<router-link>` 中的 `event` 和 `tag` 属性
-`<router-link>` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](/zh/api/#router-link-s-v-slot) 来完全定制 `<router-link>`：
+`<router-link>` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](../../api/#router-link-s-v-slot) 来完全定制 `<router-link>`：
```html
将
### 删除 `router.match` 改为 `router.resolve`
-`router.match` 和 `router.resolve` 已合并到 `router.resolve` 中，签名略有不同。[详见 API](/zh/api/#resolve)。
+`router.match` 和 `router.resolve` 已合并到 `router.resolve` 中，签名略有不同。[详见 API](../../api/#resolve)。
**原因**：将用于同一目的的多种方法统一起来。
-
### 删除 `router.getMatchedComponents()`
`router.getMatchedComponents` 方法现在被删除，因为匹配的组件可以从 `router.currentRoute.value.mixed` 中获取：
+
```js
router.currentRoute.value.matched.flatMap(record =>
Object.values(record.components)
否则会有一个初始过渡，就像你提供了 `appear` 属性到 `transition` 一样，因为路由会显示它的初始地址（什么都没有），然后显示第一个地址。
-请注意，**如果在初始导航时有导航守卫**，你可能不想阻止程序渲染，直到它们被解析，除非你正在进行服务器端渲染。否则，在这种情况下，不等待路由准备好挂载应用会产生与Vue2 中相同的结果。
+请注意，**如果在初始导航时有导航守卫**，你可能不想阻止程序渲染，直到它们被解析，除非你正在进行服务器端渲染。否则，在这种情况下，不等待路由准备好挂载应用会产生与 Vue2 中相同的结果。
### 删除 `router.app`
你也可以扩展 `Router` 接口的 TypeScript 定义来添加 `app` 属性。
-**原因**：Vue3 写的程序不能在 Vue2 中使用，现在我们使用同一个 Router 实例来支持多个程序，因此拥有 `app` 属性可能会产生误导，因为它是程序而不是根实例。
+**原因**：Vue3 写的程序不能在 Vue2 中使用，现在我们使用同一个 Router 实例来支持多个程序，因此拥有 `app` 属性可能会产生误导，因为它是程序而不是根实例。
### 将内容传递给路由组件的 `<slot>`
**原因**：我们使用历史状态来保存导航信息，如滚动位置，以前的地址等。
-### `options` 中需要配置 `routes`
+### `options` 中需要配置 `routes`
`options` 中的 `routes` 属性现在是必需的。
无论在哪里启动导航，`params`、`query`和 `hash` 中的解码值现在都是一致的（旧的浏览器仍然会产生未编码的 `path` 和 `fullPath`）。初始导航应产生与应用内部导航相同的结果。
-给定任何[规范化的路由地址](/zh/api/#routelocationnormalized):
+给定任何[规范化的路由地址](../../api/#routelocationnormalized):
-- `hash` 现在被解码了，这样就可以复制过来。`router.push({ hash: $route.hash })` 可以直接用于 [scrollBehavior](/zh/api/#scrollbehavior) 的 `el` 配置中。
+- `hash` 现在被解码了，这样就可以复制过来。`router.push({ hash: $route.hash })` 可以直接用于 [scrollBehavior](../../api/#scrollbehavior) 的 `el` 配置中。
- 当使用 `push`、`resolve` 和 `replace` 并在对象中提供 `string` 地址或 `path` 属性时，**必须进行编码**(像以前的版本一样)。另一方面，`params`、`query` 和 `hash` 必须以未编码的版本提供。
- 斜线字符(`/`)现在已在 `params` 内正确解码，同时仍在 URL 上产生一个编码版本：`%2F`。
Vue Router4 中需要关注的一些新功能包括：
-- [动态路由](/zh/api/#addroute-2)
-- [组合式 API](/zh/guide/advanced/composition-api.md)
+- [动态路由](../../api/#addroute-2)
+- [组合式 API](../advanced/composition-api.md)
<!-- - Custom History implementation -->
- 可定制的滚动行为
- URL 的正确编码
-[入门](/zh/guide/)或使用 [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (详见[`README.md`](https://github.com/vuejs/vue-router-next)来运行它们)。
+[入门](./guide/)或使用 [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (详见[`README.md`](https://github.com/vuejs/vue-router-next)来运行它们)。
<HomeSponsors />
"attributes": "vetur/attributes.json"
},
"devDependencies": {
- "@docsearch/css": "^1.0.0-alpha.27",
- "@docsearch/js": "^1.0.0-alpha.27",
"@microsoft/api-extractor": "7.8.1",
"@rollup/plugin-alias": "^3.1.2",
"@rollup/plugin-commonjs": "^17.1.0",
"@vue/devtools-api": "^6.0.0-beta.7",
"@vue/server-renderer": "^3.0.7",
"@vue/test-utils": "^2.0.0-rc.3",
- "algoliasearch": "^4.8.6",
"axios": "^0.21.1",
"brotli": "^1.3.2",
"browserstack-local": "^1.4.5",
projects / thirdparty / vuejs / router.git / commitdiff
