## `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'
},
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')
},
}
```
+
+Note that the RouterLink's `v-slot` gives access to the same properties as the `useLink` composable.
### 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
- 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.
### 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.
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 }">
### 删除 `<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
将
- 路由现在是基于它们所代表的路由记录来激活的,而不是路由地址对象及其 `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)。
### 删除 `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)。
**原因**:将用于同一目的的多种方法统一起来。