Components

A

编辑此页面

Solid-Router 提供了一个 <A /> 组件作为原生 <a /> 标签的包装器。

<A /> 支持相对路径和基础路径。<a /> 则不支持。但是当 JS 存在时,<a /> 会通过 DOM 顶层监听器得到增强,所以你仍然可以获得软导航体验。

<A /> 支持 <Router /> 的 base 属性(<Router base="/subpath">),并自动将其添加到接收到的 href 前面,而 <a /> 则不会。 对于传递给 <A /> 的相对路径也是如此。

<A> 标签的 href 与当前位置匹配时,会有一个 active 类,否则为 inactive。 默认情况下,匹配包括子路径(例如:href /users 匹配 /users/users/123 位置)。


软导航

当运行时存在 JavaScript 时,这两个组件的行为非常相似。 这是因为 Solid-Router 在 DOM 的顶层添加了一个监听器,并会增强原生 <a /> 标签以获得更好的性能体验(通过软导航)。


属性参考

| 属性 | 类型 | 描述 | | ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | | href | string | 要导航到的路由路径。这将相对于链接所在的路由进行解析,但你可以在前面加上 / 来引用回根路径。 | | noScroll | boolean | 如果为 true,关闭默认滚动到新页面顶部的行为 | | replace | boolean | 如果为 true,不会在浏览器历史记录中添加新条目。(默认情况下,新页面会被添加到浏览器历史记录中,按后退按钮会回到前一个路由。) | | state | unknown | 导航时将此值推送到历史堆栈 | | inactiveClass | string | 链接处于非活动状态时显示的类(当前位置与链接不匹配时) | | activeClass | string | 链接处于活动状态时显示的类 | | end | boolean | 如果为 true,仅当当前位置与 href 完全匹配时才认为链接处于活动状态;如果为 false,则检查当前位置是否以 href 开头 |

报告此页面问题