RouterLink 组件

<RouterLink> 是 vitarx-router 提供的声明式导航组件，用于在模板中创建导航链接。相比原生 <a> 标签，它能够自动处理路由跳转、激活状态和高亮样式。

基本用法

最简单的用法是传入 to 属性指定目标路径：

tsx

<RouterLink to="/about">关于</RouterLink>

渲染后，<RouterLink> 会生成一个 <a> 标签，点击时触发路由导航而非页面刷新。

Props

属性	类型	默认值	说明
`children`	`RenderChildren`	—	子元素
`to`	`string \| NavTarget \| RouteIndex`	—	导航目标，必填
`replace`	`boolean`	`false`	是否替换当前历史记录
`disabled`	`boolean`	`false`	是否禁用导航
`activeClass`	`string`	—	部分匹配时添加的 CSS 类名
`exactActiveClass`	`string`	—	精确匹配时添加的 CSS 类名
`disabledClass`	`string`	—	禁用时添加的 CSS 类名
`exactMatchMode`	`'path' \| 'href' \| 'hash' \| 'query'`	`'path'`	精确匹配的判定模式
`callback`	`(result: NavigateResult) => void`	—	导航完成后的回调函数
`viewTransition`	`boolean`	`false`	是否启用视图过渡动画
其他	`unknown`	—	其他继承于a元素的属性

激活状态

<RouterLink> 提供了两种激活状态，方便你为当前路由对应的链接添加高亮样式：

isActive：部分匹配——当前路径在片段级别以目标路径开头时为 true
isExactActive：精确匹配——根据 exactMatchMode 判定当前路径与目标路径完全一致时为 true

tsx

<RouterLink to="/user" activeClass="link-active" exactActiveClass="link-exact-active">
  用户中心
</RouterLink>

当当前路径为 /user/profile 时，isActive 为 true（部分匹配），isExactActive 为 false（非精确匹配）。

当当前路径为 /user 时，isActive 和 isExactActive 均为 true。

部分匹配的判定是基于路径片段的。例如，当前路径为 /user/profile 时，目标路径为 /use 的链接不会被判定为激活，因为 /user 和 /use 不是同一片段。

导航到命名路由

to 属性也支持传入导航选项对象，通过路由名称和参数进行导航：

tsx

<RouterLink to={{ index: 'user', params: { id: '123' } }}>用户详情</RouterLink>

外部链接

当 to 属性的值是一个外部 URL 时，<RouterLink> 会自动渲染为普通的 <a> 标签，不会触发路由导航：

tsx

<RouterLink to="https://example.com" target="_blank">
  外部链接
</RouterLink>

外部链接不会经过路由守卫，也不会触发导航结果回调。

完整示例

tsx

import { RouterLink } from 'vitarx-router'

function NavBar() {
  return (
    <nav>
      <RouterLink to="/" exactActiveClass="exact-active">
        首页
      </RouterLink>

      <RouterLink to={{ index: 'user', params: { id: '123' } }} activeClass="active">
        用户
      </RouterLink>

      <RouterLink to="/about" replace>
        关于（替换模式）
      </RouterLink>

      <RouterLink to="/settings" disabled disabledClass="disabled">
        设置（禁用）
      </RouterLink>

      <RouterLink
        to="/profile"
        exactMatchMode="href"
        exactActiveClass="exact-active"
        callback={result => {
          console.log('导航结果：', result.state)
        }}
      >
        个人资料
      </RouterLink>
    </nav>
  )
}

导航结果 — 了解如何处理导航的状态与失败情况。