]> git.ipfire.org Git - thirdparty/vuejs/router.git/commitdiff
docs: fix v-slot useLink
authorEduardo San Martin Morote <posva13@gmail.com>
Thu, 23 Feb 2023 09:00:48 +0000 (10:00 +0100)
committerEduardo San Martin Morote <posva13@gmail.com>
Thu, 23 Feb 2023 09:00:48 +0000 (10:00 +0100)
Close #1711

packages/docs/guide/advanced/composition-api.md
packages/docs/guide/migration/index.md
packages/docs/zh/guide/advanced/transitions.md
packages/docs/zh/guide/migration/index.md

index 7faf5031bda3bd411ee62cfb2fac6ea49a40218f..dd1d50aa8b60d71f97eeea84b01a7aff8ab9d8e5 100644 (file)
@@ -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.
index 6553e484fa456d199bc2162848987b0d6af86e55..ffe7b6b1ba608b1c2aa9b755aca3baa7c19a827e 100644 (file)
@@ -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.
 
index 169606d37440e59c4e0d43175dc97e5d0be6bd5d..19ddf9b6fae3456289af4cc66cb0dfa7594e570f 100644 (file)
@@ -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 }">
index 554c9d139ca3794b3897bfe8ce83c16c1732edd9..7681052f577485b7436c2a7c52866c442d04b6ba 100644 (file)
@@ -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)。
 
 **原因**:将用于同一目的的多种方法统一起来。