From: Eduardo San Martin Morote Date: Thu, 1 Apr 2021 13:04:36 +0000 (+0200) Subject: docs: use relative links X-Git-Tag: v4.0.6~6 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=560fcd780b04c8fa13b850965b02e66ef261b97b;p=thirdparty%2Fvuejs%2Frouter.git docs: use relative links --- diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 271e8855..e9def56e 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -301,24 +301,6 @@ const config = { ], }, }, - - // '/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', - // }, - // ], - // }, }, } diff --git a/docs/api/index.md b/docs/api/index.md index ebab310f..ef678e48 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -154,7 +154,7 @@ If you add a `target="_blank"` to your `a` element, you must omit the `@click="n When a `` 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 @@ -771,7 +771,7 @@ stringifyQuery?: ( 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 @@ -782,7 +782,7 @@ Route record that can be provided by the user when adding routes via the [`route 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 @@ -801,7 +801,7 @@ Route record that can be provided by the user when adding routes via the [`route 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 @@ -834,7 +834,7 @@ Route record that can be provided by the user when adding routes via the [`route 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 @@ -843,7 +843,7 @@ Route record that can be provided by the user when adding routes via the [`route Custom data attached to the record. -- **See Also**: [Meta fields](/guide/advanced/meta.md) +- **See Also**: [Meta fields](../guide/advanced/meta.md) ## RouteRecordNormalized @@ -863,7 +863,7 @@ Normalized version of a [Route Record](#routerecordraw) 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 @@ -886,7 +886,7 @@ Normalized version of a [Route Record](#routerecordraw) Arbitrary data attached to the record. -- **See also**: [Meta fields](/guide/advanced/meta.md) +- **See also**: [Meta fields](../guide/advanced/meta.md) ### name @@ -918,7 +918,7 @@ Normalized version of a [Route Record](#routerecordraw) ## 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: @@ -988,7 +988,7 @@ Normalized route location. Does not have any [redirect records](#routerecordraw) 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 @@ -1041,7 +1041,7 @@ Normalized route location. Does not have any [redirect records](#routerecordraw) Type of the navigation failure. -- **See Also**: [Navigation Failures](/guide/advanced/navigation-failures.md) +- **See Also**: [Navigation Failures](../guide/advanced/navigation-failures.md) ## NavigationGuard @@ -1060,7 +1060,7 @@ Normalized route location. Does not have any [redirect records](#routerecordraw) - [`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 @@ -1082,4 +1082,4 @@ These properties are injected into every child component by calling `app.use(rou - **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). diff --git a/docs/guide/advanced/composition-api.md b/docs/guide/advanced/composition-api.md index a004e3a9..d8e344e1 100644 --- a/docs/guide/advanced/composition-api.md +++ b/docs/guide/advanced/composition-api.md @@ -84,7 +84,7 @@ Composition API guards can also be used in any component rendered by ` diff --git a/docs/guide/essentials/dynamic-matching.md b/docs/guide/essentials/dynamic-matching.md index 62f1ed4c..a3b31b74 100644 --- a/docs/guide/essentials/dynamic-matching.md +++ b/docs/guide/essentials/dynamic-matching.md @@ -31,7 +31,7 @@ You can have multiple _params_ in the same route, and they will map to correspon | /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). @@ -88,7 +88,7 @@ const routes = [ ] ``` -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({ @@ -101,7 +101,7 @@ 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. diff --git a/docs/guide/essentials/history-mode.md b/docs/guide/essentials/history-mode.md index 8bc513e6..b75f0d4c 100644 --- a/docs/guide/essentials/history-mode.md +++ b/docs/guide/essentials/history-mode.md @@ -42,7 +42,7 @@ Not to worry: To fix the issue, all you need to do is add a simple catch-all fal ## 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 diff --git a/docs/guide/essentials/navigation.md b/docs/guide/essentials/navigation.md index 78b89810..ee2cc6c3 100644 --- a/docs/guide/essentials/navigation.md +++ b/docs/guide/essentials/navigation.md @@ -53,7 +53,7 @@ router.push({ path: '/user', params: { username } }) // -> /user 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 @@ -98,4 +98,4 @@ You may have noticed that `router.push`, `router.replace` and `router.go` are co 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. diff --git a/docs/guide/index.md b/docs/guide/index.md index 6f7a2aab..5f6f9839 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -90,6 +90,6 @@ export default { } ``` -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. diff --git a/docs/guide/migration/index.md b/docs/guide/migration/index.md index 95d43751..569f6911 100644 --- a/docs/guide/migration/index.md +++ b/docs/guide/migration/index.md @@ -163,7 +163,7 @@ app.config.globalProperties.append = (path, pathToAppend) => ### Removal of `event` and `tag` props in `` -Both `event`, and `tag` props have been removed from ``. You can use the [`v-slot` API](/api/#router-link-s-v-slot) to fully customize ``: +Both `event`, and `tag` props have been removed from ``. You can use the [`v-slot` API](../../api/#router-link-s-v-slot) to fully customize ``: ```html replace @@ -193,7 +193,7 @@ At the moment navigation guards in mixins are not supported. You can track its s ### 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. @@ -354,7 +354,11 @@ const routes = [ component: DashboardParent, children: [ { path: '', name: 'dashboard', component: DashboardDefault }, - { path: 'settings', name: 'dashboard-settings', component: DashboardSettings }, + { + path: 'settings', + name: 'dashboard-settings', + component: DashboardSettings, + }, ], }, ] @@ -384,7 +388,7 @@ const routes = [ 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`. - + **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. @@ -394,10 +398,10 @@ Note this will work if `path` was `/parent/` as the relative location `home` to 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`. @@ -417,6 +421,6 @@ To make typings more consistent and expressive, some types have been renamed: 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) diff --git a/docs/introduction.md b/docs/introduction.md index a2040f16..ca44d9d3 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -13,7 +13,7 @@ Vue Router is the official router for [Vue.js](http://v3.vuejs.org). It deeply i - 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). diff --git a/docs/zh/api/index.md b/docs/zh/api/index.md index 908868ec..7aec807b 100644 --- a/docs/zh/api/index.md +++ b/docs/zh/api/index.md @@ -154,7 +154,7 @@ sidebar: auto 如果 `` 设置了 `name`，则会渲染对应的路由配置中 `components` 下的相应组件。 -- **更多的内容请看**：[命名视图](/zh/guide/essentials/named-views.md) +- **更多的内容请看**：[命名视图](../guide/essentials/named-views.md) ### route @@ -217,7 +217,7 @@ createWebHistory('/folder/') // 给出的网址为 `https://example.com/folder/` ## createWebHashHistory -创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 `file://`)，或当配置服务器不能处理任意URL时这非常有用。**注意：如果 SEO 对你很重要，你应该使用 [`createWebHistory`](#createwebhistory)**。 +创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 `file://`)，或当配置服务器不能处理任意 URL 时这非常有用。**注意：如果 SEO 对你很重要，你应该使用 [`createWebHistory`](#createwebhistory)**。 **函数签名：** @@ -771,7 +771,7 @@ stringifyQuery?: ( 当用户通过 [`routes` option](#routeroptions) 或者 [`router.addRoutes()`](#addroutes) 来添加路由时，可以得到路由记录。 有三种不同的路由记录: - 单一视图记录：有一个 `component` 配置 -- 多视图记录 ([命名视图](/zh/guide/essentials/named-views.md)) ：有一个 `components` 配置 +- 多视图记录 ([命名视图](../guide/essentials/named-views.md)) ：有一个 `components` 配置 - 重定向记录：没有 `component` 或 `components` 配置，因为重定向记录永远不会到达。 ### path @@ -781,7 +781,7 @@ stringifyQuery?: ( 记录的路径。应该以 `/` 开头，除非该记录是另一条记录的子记录。可以定义参数：`/users/:id` 匹配 `/users/1` 以及 `/users/posva`。 -- **更多的内容请看**：[动态路由匹配](/zh/guide/essentials/dynamic-matching.md) +- **更多的内容请看**：[动态路由匹配](../guide/essentials/dynamic-matching.md) ### redirect @@ -797,7 +797,7 @@ stringifyQuery?: ( 当前记录的嵌套路由。 -- **更多的内容请看**：[Nested Routes](/zh/guide/essentials/nested-routes.md) +- **更多的内容请看**：[Nested Routes](../guide/essentials/nested-routes.md) ### alias @@ -828,7 +828,7 @@ stringifyQuery?: ( 允许将参数作为 props 传递给由 `router-view` 渲染的组件。当传递给一个*多视图记录*时，它应该是一个与`组件`具有相同键的对象，或者是一个应用于每个组件的`布尔值`。 -- **更多的内容请看**：[给路由组件传 props](/zh/guide/essentials/passing-props.md) +- **更多的内容请看**：[给路由组件传 props](../guide/essentials/passing-props.md) ### meta @@ -837,7 +837,7 @@ stringifyQuery?: ( 在记录上附加自定义数据。 -- **更多的内容请看**：[Meta 字段](/zh/guide/advanced/meta.md) +- **更多的内容请看**：[Meta 字段](../guide/advanced/meta.md) ## RouteRecordNormalized @@ -857,7 +857,7 @@ stringifyQuery?: ( 当从其他地方进入此记录时，导航守卫会被应用。 -- **更多的内容请看**：[导航守卫](/zh/guide/advanced/navigation-guards.md) +- **更多的内容请看**：[导航守卫](../guide/advanced/navigation-guards.md) ### children @@ -880,7 +880,7 @@ stringifyQuery?: ( 附在记录上的任意数据。 -- **更多的内容请看**：[Meta 字段](/zh/guide/advanced/meta.md) +- **更多的内容请看**：[Meta 字段](../guide/advanced/meta.md) ### name @@ -912,7 +912,7 @@ stringifyQuery?: ( ## RouteLocationRaw -用户级的路由地址，可以传递给 `router.push()`，`redirect`，并在[导航守卫](/zh/guide/advanced/navigation-guards.md)中返回。 +用户级的路由地址，可以传递给 `router.push()`，`redirect`，并在[导航守卫](../guide/advanced/navigation-guards.md)中返回。 原始位置可以是一个 `字符串`，比如 `/users/posva#bio`，也可以是一个对象： @@ -982,7 +982,7 @@ router.replace({ hash: '#bio' }) 附加到从父级到子级合并（非递归）的所有匹配记录的任意数据。 -- **更多的内容请看**：[Meta 字段](/zh/guide/advanced/meta.md) +- **更多的内容请看**：[Meta 字段](../guide/advanced/meta.md) ### name @@ -1035,7 +1035,7 @@ router.replace({ hash: '#bio' }) 导航失败的类型 -- **更多的内容请看**：[Navigation Failures](/zh/guide/advanced/navigation-failures.md) +- **更多的内容请看**：[Navigation Failures](../guide/advanced/navigation-failures.md) ## NavigationGuard @@ -1054,7 +1054,7 @@ router.replace({ hash: '#bio' }) - [`RouteLocationRaw`](#routelocationraw): 重定向到一个不同的位置 - `(vm: ComponentPublicInstance) => any` **仅适用于 `beforeRouteEnter`**：导航完成后执行的回调。接收路由组件实例作为参数。 -- **更多的内容请看**：[导航守卫](/zh/guide/advanced/navigation-guards.md) +- **更多的内容请看**：[导航守卫](../guide/advanced/navigation-guards.md) ## Component Injections @@ -1076,4 +1076,4 @@ router.replace({ hash: '#bio' }) - **beforeRouteUpdate** - **beforeRouteLeave** -请看[组件内的守卫](/zh/guide/advanced/navigation-guards.md#组件内的守卫)。 +请看[组件内的守卫](../guide/advanced/navigation-guards.md#组件内的守卫)。 diff --git a/docs/zh/guide/advanced/composition-api.md b/docs/zh/guide/advanced/composition-api.md index 3ba2109a..a06f8688 100644 --- a/docs/zh/guide/advanced/composition-api.md +++ b/docs/zh/guide/advanced/composition-api.md @@ -84,7 +84,7 @@ export default { ## `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' diff --git a/docs/zh/guide/advanced/dynamic-routing.md b/docs/zh/guide/advanced/dynamic-routing.md index 90109158..68c4594d 100644 --- a/docs/zh/guide/advanced/dynamic-routing.md +++ b/docs/zh/guide/advanced/dynamic-routing.md @@ -1,6 +1,6 @@ # 动态路由 -添加路由到你的路由上通常是通过 [`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) )这样的应用程序可以使用它来扩展应用程序。 ## 添加路由 @@ -31,7 +31,6 @@ router.replace(router.currentRoute.value.fullPath) 记住，如果你需要等待新的路由显示，可以使用 `await router.replace()`。 - ## 在导航守卫中添加路由 如果你决定在导航守卫内部添加或删除路由，你不应该调用 `router.replace()`，而是通过返回新的位置来触发重定向： @@ -98,7 +97,7 @@ router.addRoute({ ## 查看现有路由 -Vue Router提供了两个功能来查看现有的路由： +Vue Router 提供了两个功能来查看现有的路由： -- [`router.hasRoute()`](/zh/api/#hasroute)：检查路由是否存在。 -- [`router.getRoutes()`](/zh/api/#getroutes)：获取一个包含所有路由记录的数组。 +- [`router.hasRoute()`](../../api/#hasroute)：检查路由是否存在。 +- [`router.getRoutes()`](../../api/#getroutes)：获取一个包含所有路由记录的数组。 diff --git a/docs/zh/guide/advanced/navigation-guards.md b/docs/zh/guide/advanced/navigation-guards.md index bbef3667..6d42549f 100644 --- a/docs/zh/guide/advanced/navigation-guards.md +++ b/docs/zh/guide/advanced/navigation-guards.md @@ -20,15 +20,15 @@ router.beforeEach((to, from) => { 每个守卫方法接收两个参数： -- **`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`，**则导航是有效的**，并调用下一个导航守卫 diff --git a/docs/zh/guide/advanced/transitions.md b/docs/zh/guide/advanced/transitions.md index 4fd02e86..9940985f 100644 --- a/docs/zh/guide/advanced/transitions.md +++ b/docs/zh/guide/advanced/transitions.md @@ -1,6 +1,6 @@ # 过渡动效 -想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](/zh/api/#router-view-s-v-slot)： +想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](../../api/#router-view-s-v-slot)： ```html diff --git a/docs/zh/guide/essentials/dynamic-matching.md b/docs/zh/guide/essentials/dynamic-matching.md index 496659fd..95d84e90 100644 --- a/docs/zh/guide/essentials/dynamic-matching.md +++ b/docs/zh/guide/essentials/dynamic-matching.md @@ -26,12 +26,12 @@ const User = { 你可以在同一个路由中设置有多个 _路径参数_，它们会映射到 `$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)找到。 @@ -88,7 +88,7 @@ const routes = [ ] ``` -在这个特定的场景中，我们在括号之间使用了[自定义正则表达式](/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({ @@ -97,7 +97,7 @@ this.$router.push({ }) ``` -更多内容请参见[重复参数](/zh/guide/essentials/route-matching-syntax.md#可重复的参数)部分。 +更多内容请参见[重复参数](./route-matching-syntax.md#可重复的参数)部分。 如果你正在使用[历史模式](./history-mode.md)，请务必按照说明正确配置你的服务器。 diff --git a/docs/zh/guide/essentials/history-mode.md b/docs/zh/guide/essentials/history-mode.md index f65838a9..b2f2844f 100644 --- a/docs/zh/guide/essentials/history-mode.md +++ b/docs/zh/guide/essentials/history-mode.md @@ -17,7 +17,7 @@ const router = createRouter({ }) ``` -它在内部传递的实际 URL 之前使用了一个哈希字符（`#`）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，**它在SEO中确实有不好的影响**。如果你担心这个问题，可以使用 HTML5 模式。 +它在内部传递的实际 URL 之前使用了一个哈希字符（`#`）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，**它在 SEO 中确实有不好的影响**。如果你担心这个问题，可以使用 HTML5 模式。 ## HTML5 模式 @@ -42,7 +42,7 @@ const router = createRouter({ ## 服务器配置示例 -**注意**：以下示例假定你正在从根目录提供服务。如果你部署到子目录，你应该使用[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 @@ -58,6 +58,7 @@ const router = createRouter({ ``` 也可以使用 [`FallbackResource`](https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource) 代替 `mod_rewrite`。 + ### nginx ```nginx diff --git a/docs/zh/guide/essentials/navigation.md b/docs/zh/guide/essentials/navigation.md index 45c875cd..1e70fd74 100644 --- a/docs/zh/guide/essentials/navigation.md +++ b/docs/zh/guide/essentials/navigation.md @@ -14,7 +14,7 @@ sidebarDepth: 0 当你点击 `` 时，内部会调用这个方法，所以点击 `` 相当于调用 `router.push(...)` ： -| 声明式 | 编程式 | +| 声明式 | 编程式 | | ------------------------- | ------------------ | | `` | `router.push(...)` | @@ -53,13 +53,13 @@ router.push({ path: '/user', params: { username } }) // -> /user 由于属性 `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.replace(...)` | @@ -81,13 +81,13 @@ router.replace({ path: '/home' }) // 向前移动一条记录，与 router.forward() 相同 router.go(1) -// 返回一条记录，与router.back() 相同 +// 返回一条记录，与router.back() 相同 router.go(-1) // 前进 3 条记录 router.go(3) -// 如果没有那么多记录，静默失败 +// 如果没有那么多记录，静默失败 router.go(-100) router.go(100) ``` @@ -98,4 +98,4 @@ 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`)都能始终如一地工作。 diff --git a/docs/zh/guide/index.md b/docs/zh/guide/index.md index a37f09ff..99a28f60 100644 --- a/docs/zh/guide/index.md +++ b/docs/zh/guide/index.md @@ -90,6 +90,6 @@ export default { } ``` -要在 `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` 的原因是，我们不想在每个需要操作路由的组件中都导入路由。 diff --git a/docs/zh/guide/migration/index.md b/docs/zh/guide/migration/index.md index 84a02ecd..0379dc8a 100644 --- a/docs/zh/guide/migration/index.md +++ b/docs/zh/guide/migration/index.md @@ -97,7 +97,6 @@ router.resolve({ 如果你不打算使用其名称直接跳转到未找到的路由，则无需为重复的参数添加 `*`。如果你调用 `router.push('/not/found/url')`，它将提供正确的 `pathMatch` 参数。 ::: - **原因**：Vue Router 不再使用 `path-to-regexp`，而是实现了自己的解析系统，允许路由排序并实现动态路由。由于我们通常在每个项目中只添加一个通配符路由，所以支持 `*` 的特殊语法并没有太大的好处。参数的编码是跨路由的，无一例外，让事情更容易预测。 ### 将 `onReady` 改为 `isReady` @@ -164,7 +163,7 @@ app.config.globalProperties.append = (path, pathToAppend) => ### 删除 `` 中的 `event` 和 `tag` 属性 -`` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](/zh/api/#router-link-s-v-slot) 来完全定制 ``： +`` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](../../api/#router-link-s-v-slot) 来完全定制 ``： ```html 将 @@ -194,14 +193,14 @@ app.config.globalProperties.append = (path, pathToAppend) => ### 删除 `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) @@ -222,7 +221,7 @@ router.isReady().then(() => app.mount('#app')) 否则会有一个初始过渡，就像你提供了 `appear` 属性到 `transition` 一样，因为路由会显示它的初始地址（什么都没有），然后显示第一个地址。 -请注意，**如果在初始导航时有导航守卫**，你可能不想阻止程序渲染，直到它们被解析，除非你正在进行服务器端渲染。否则，在这种情况下，不等待路由准备好挂载应用会产生与Vue2 中相同的结果。 +请注意，**如果在初始导航时有导航守卫**，你可能不想阻止程序渲染，直到它们被解析，除非你正在进行服务器端渲染。否则，在这种情况下，不等待路由准备好挂载应用会产生与 Vue2 中相同的结果。 ### 删除 `router.app` @@ -235,7 +234,7 @@ router.app = app 你也可以扩展 `Router` 接口的 TypeScript 定义来添加 `app` 属性。 -**原因**：Vue3 写的程序不能在 Vue2 中使用，现在我们使用同一个 Router 实例来支持多个程序，因此拥有 `app` 属性可能会产生误导，因为它是程序而不是根实例。 +**原因**：Vue3 写的程序不能在 Vue2 中使用，现在我们使用同一个 Router 实例来支持多个程序，因此拥有 `app` 属性可能会产生误导，因为它是程序而不是根实例。 ### 将内容传递给路由组件的 `` @@ -306,7 +305,7 @@ history.replaceState(history.state, '', url) **原因**：我们使用历史状态来保存导航信息，如滚动位置，以前的地址等。 -### `options` 中需要配置 `routes` +### `options` 中需要配置 `routes` `options` 中的 `routes` 属性现在是必需的。 @@ -395,9 +394,9 @@ const 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`。 @@ -417,6 +416,6 @@ const routes = [ Vue Router4 中需要关注的一些新功能包括： -- [动态路由](/zh/api/#addroute-2) -- [组合式 API](/zh/guide/advanced/composition-api.md) +- [动态路由](../../api/#addroute-2) +- [组合式 API](../advanced/composition-api.md) diff --git a/docs/zh/introduction.md b/docs/zh/introduction.md index 4cd7ddc5..8471f51f 100644 --- a/docs/zh/introduction.md +++ b/docs/zh/introduction.md @@ -13,7 +13,7 @@ Vue Router 是 [Vue.js](http://v3.vuejs.org) 的官方路由。它与 Vue.js 核 - 可定制的滚动行为 - 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)来运行它们)。 diff --git a/package.json b/package.json index cae264f1..9920bc25 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,6 @@ "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", @@ -74,7 +72,6 @@ "@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",