useLink() - 链接功能组合函数
useLink() 是一个组合式 API 函数,为自定义链接组件提供底层的路由链接功能。它是 <RouterLink> 组件的内部实现基础,让你能够创建具有完全自定义样式的路由链接。🎨
📋 函数签名
typescript
function useLink(props: UseLinkOptions): UseLinkReturn🎯 功能说明
这个函数就像是给自定义链接组件装上了"路由引擎",提供:
- 路由导航能力 - 点击时进行路由跳转
- 激活状态检测 - 判断链接是否指向当前路由
- 鼠标事件处理 - 处理点击、右键等交互
- 无障碍支持 - 提供 ARIA 属性和键盘导航
⚙️ 参数说明
props - 链接配置选项
| 类型 | 必填 | 说明 |
|---|---|---|
UseLinkOptions | ✅ | 链接的行为和外观配置 |
📤 返回值
返回一个 UseLinkReturn 对象,包含链接功能的所有必要属性和方法。
💡 实际应用示例
创建自定义链接组件
vue
<template>
<a
:href="href"
:class="{ active: isActive }"
@click="navigate"
@click.middle="navigate"
@click.right="navigate"
>
<slot />
</a>
</template>
<script setup>
import { useLink } from 'vue-router'
const props = defineProps({
to: {
type: [String, Object],
required: true
},
// 其他自定义属性...
})
const {
href,
isActive,
isExactActive,
navigate
} = useLink(props)
</script>
<style scoped>
.active {
color: #42b883;
font-weight: bold;
}
</style>高级自定义配置
vue
<script setup>
import { useLink } from 'vue-router'
const linkProps = {
to: '/dashboard',
replace: false, // 使用 push 而不是 replace
custom: false, // 是否禁用内置的导航行为
ariaCurrentValue: 'page' // ARIA 当前值
}
const {
href,
isActive,
isExactActive,
navigate,
isExternal
} = useLink(linkProps)
// 自定义导航行为
const handleClick = (event) => {
if (event.ctrlKey || event.metaKey) {
// 按住 Ctrl/Cmd 点击时在新标签页打开
window.open(href.value, '_blank')
} else {
navigate(event)
}
}
</script>🔧 返回值详解
href - 解析后的链接地址
typescript
const { href } = useLink({ to: '/user/123' })
// href.value = '/user/123' (基于当前基础路径)isActive - 激活状态
typescript
const { isActive } = useLink({ to: '/user/123' })
// 当当前路由匹配 /user/123 或它的子路由时,isActive.value = trueisExactActive - 精确激活状态
typescript
const { isExactActive } = useLink({ to: '/user/123' })
// 只有当当前路由完全匹配 /user/123 时,isExactActive.value = truenavigate - 导航函数
typescript
const { navigate } = useLink({ to: '/user/123' })
// 调用导航
navigate() // 默认点击事件
navigate(new MouseEvent('click')) // 模拟点击事件🎯 使用场景
创建样式自定义的导航菜单
vue
<template>
<nav>
<CustomLink
v-for="item in menuItems"
:key="item.to"
:to="item.to"
class="menu-item"
>
{{ item.text }}
</CustomLink>
</nav>
</template>
<script setup>
import CustomLink from './CustomLink.vue'
const menuItems = [
{ to: '/', text: '首页' },
{ to: '/about', text: '关于' },
{ to: '/contact', text: '联系' }
]
</script>集成第三方 UI 库
vue
<template>
<Button
:type="isActive ? 'primary' : 'default'"
@click="navigate"
>
<slot />
</Button>
</template>
<script setup>
import { Button } from 'ant-design-vue'
import { useLink } from 'vue-router'
const props = defineProps({
to: { type: [String, Object], required: true }
})
const { isActive, navigate } = useLink(props)
</script>🔗 相关 API
RouterLink- 内置路由链接组件
💡 专业建议:如果你只需要标准的链接样式,直接使用
<RouterLink>组件会更简单。只有在需要完全自定义样式或特殊交互时才使用useLink()。