From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 23 Feb 2023 09:00:48 +0000 (+0100)
Subject: docs: fix v-slot useLink
X-Git-Tag: v4.2.0~44
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fcd96c05a79fcf8b7368659ad3386f7cf5d2733b;p=thirdparty%2Fvuejs%2Frouter.git

docs: fix v-slot useLink

Close #1711
---

diff --git a/packages/docs/guide/advanced/composition-api.md b/packages/docs/guide/advanced/composition-api.md
index 7faf5031..dd1d50aa 100644
--- a/packages/docs/guide/advanced/composition-api.md
+++ b/packages/docs/guide/advanced/composition-api.md
@@ -92,7 +92,7 @@ Composition API guards can also be used in any component rendered by `<router-vi
 
 ## `useLink`
 
-Vue Router exposes the internal behavior of RouterLink as a Composition API function. It gives access to the same properties as the [`v-slot` API](../../api/#router-link-s-v-slot):
+Vue Router exposes the internal behavior of RouterLink as a composable. It accepts a reactive object like the props of `RouterLink` and exposes low-level properties to build your own `RouterLink` component or generate custom links:
 
 ```js
 import { RouterLink, useLink } from 'vue-router'
@@ -108,7 +108,18 @@ export default {
   },
 
   setup(props) {
-    const { route, href, isActive, isExactActive, navigate } = useLink(props)
+    const {
+      // the resolved route object
+      route,
+      // the href to use in a link
+      href,
+      // boolean ref  indicating if the link is active
+      isActive,
+      // boolean ref  indicating if the link is exactly active
+      isExactActive,
+      // function to navigate to the link
+      navigate
+      } = useLink(props)
 
     const isExternalLink = computed(
       () => typeof props.to === 'string' && props.to.startsWith('http')
@@ -118,3 +129,5 @@ export default {
   },
 }
 ```
+
+Note that the RouterLink's `v-slot` gives access to the same properties as the `useLink` composable.
diff --git a/packages/docs/guide/migration/index.md b/packages/docs/guide/migration/index.md
index 6553e484..ffe7b6b1 100644
--- a/packages/docs/guide/migration/index.md
+++ b/packages/docs/guide/migration/index.md
@@ -177,7 +177,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>
 
 ### 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](/guide/advanced/composition-api#uselink) to fully customize `<router-link>`:
 
 ```html
 replace
@@ -197,7 +197,7 @@ The `exact` prop has been removed because the caveat it was fixing is no longer
 - Routes are now active based on the route records they represent instead of the generated route location objects and their `path`, `query`, and `hash` properties
 - Only the `path` section is matched, `query`, and `hash` aren't taken into account anymore
 
-If you wish to customize this behavior, e.g. take into account the `hash` section, you should use the [`v-slot` API](https://next.router.vuejs.org/api/#router-link-s-v-slot) to extend `<router-link>`.
+If you wish to customize this behavior, e.g. take into account the `hash` section, you should use the [`v-slot` API](/guide/advanced/composition-api#uselink) to extend `<router-link>`.
 
 **Reason**: See the [RFC about active matching](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#summary) changes for more details.
 
@@ -207,7 +207,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/interfaces/router#Methods-resolve) for more details.
 
 **Reason**: Uniting multiple methods that were used for the same purpose.
 
diff --git a/packages/docs/zh/guide/advanced/transitions.md b/packages/docs/zh/guide/advanced/transitions.md
index 169606d3..19ddf9b6 100644
--- a/packages/docs/zh/guide/advanced/transitions.md
+++ b/packages/docs/zh/guide/advanced/transitions.md
@@ -5,7 +5,7 @@
   title="Learn about route transitions"
 />
 
-想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](../../api/#router-view-s-v-slot)：
+想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](/guide/advanced/composition-api#uselink)：
 
 ```html
 <router-view v-slot="{ Component }">
diff --git a/packages/docs/zh/guide/migration/index.md b/packages/docs/zh/guide/migration/index.md
index 554c9d13..7681052f 100644
--- a/packages/docs/zh/guide/migration/index.md
+++ b/packages/docs/zh/guide/migration/index.md
@@ -177,7 +177,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>
 
 ### 删除 `<router-link>` 中的 `event` 和 `tag` 属性
 
-`<router-link>` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](../../api/#router-link-s-v-slot) 来完全定制 `<router-link>`：
+`<router-link>` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](/zh/guide/advanced/composition-api#uselink) 来完全定制 `<router-link>`：
 
 ```html
 将
@@ -197,7 +197,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>
 - 路由现在是基于它们所代表的路由记录来激活的，而不是路由地址对象及其 `path`、`query` 和 `hash` 属性来激活的
 - 只匹配 `path` 部分，`query` 和 `hash` 不再考虑
 
-如果你想自定义这种行为，例如考虑到 `hash` 部分，你应该使用 [`v-slot` API](https://next.router.vuejs.org/api/#router-link-s-v-slot) 来扩展`<router-link>`。
+如果你想自定义这种行为，例如考虑到 `hash` 部分，你应该使用 [`v-slot` API](/zh/guide/advanced/composition-api#uselink) 来扩展`<router-link>`。
 
 **原因**: 详见 [RFC about active matching](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#summary)。
 
@@ -207,7 +207,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>
 
 ### 删除 `router.match` 改为 `router.resolve`
 
-`router.match` 和 `router.resolve` 已合并到 `router.resolve` 中，签名略有不同。[详见 API](../../api/#resolve)。
+`router.match` 和 `router.resolve` 已合并到 `router.resolve` 中，签名略有不同。[详见 API](../../api/interfaces/router#Methods-resolve)。
 
 **原因**：将用于同一目的的多种方法统一起来。