useLink() - 链接功能组合函数

useLink() 是一个组合式 API 函数，为自定义链接组件提供底层的路由链接功能。它是 <RouterLink> 组件的内部实现基础，让你能够创建具有完全自定义样式的路由链接。🎨

📋 函数签名

function useLink(props: UseLinkOptions): UseLinkReturn

🎯 功能说明

这个函数就像是给自定义链接组件装上了"路由引擎"，提供：

1. 路由导航能力 - 点击时进行路由跳转
2. 激活状态检测 - 判断链接是否指向当前路由
3. 鼠标事件处理 - 处理点击、右键等交互
4. 无障碍支持 - 提供 ARIA 属性和键盘导航

⚙️ 参数说明

props - 链接配置选项

类型	必填	说明
UseLinkOptions	✅	链接的行为和外观配置

📤 返回值

返回一个 UseLinkReturn 对象，包含链接功能的所有必要属性和方法。

💡 实际应用示例

创建自定义链接组件

<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>

高级自定义配置

<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 - 解析后的链接地址

const { href } = useLink({ to: '/user/123' })
// href.value = '/user/123' (基于当前基础路径)

isActive - 激活状态

const { isActive } = useLink({ to: '/user/123' })
// 当当前路由匹配 /user/123 或它的子路由时，isActive.value = true

isExactActive - 精确激活状态

const { isExactActive } = useLink({ to: '/user/123' })
// 只有当当前路由完全匹配 /user/123 时，isExactActive.value = true

navigate - 导航函数

const { navigate } = useLink({ to: '/user/123' })

// 调用导航
navigate() // 默认点击事件
navigate(new MouseEvent('click')) // 模拟点击事件

🎯 使用场景

创建样式自定义的导航菜单

<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 库

<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()。