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
位置)。
使用布尔值 end
属性可以防止匹配这些。这对于指向根路由 /
的链接特别有用,
因为根路由会匹配所有内容。
软导航
当运行时存在 JavaScript 时,这两个组件的行为非常相似。
这是因为 Solid-Router 在 DOM 的顶层添加了一个监听器,并会增强原生 <a />
标签以获得更好的性能体验(通过软导航)。
要在存在 JavaScript 时阻止 <A />
和 <a />
标签进行软导航,请传递 target="_self"
属性。
属性参考
| 属性 | 类型 | 描述 |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| href | string | 要导航到的路由路径。这将相对于链接所在的路由进行解析,但你可以在前面加上 /
来引用回根路径。 |
| noScroll | boolean | 如果为 true,关闭默认滚动到新页面顶部的行为 |
| replace | boolean | 如果为 true,不会在浏览器历史记录中添加新条目。(默认情况下,新页面会被添加到浏览器历史记录中,按后退按钮会回到前一个路由。) |
| state | unknown | 导航时将此值推送到历史堆栈 |
| inactiveClass | string | 链接处于非活动状态时显示的类(当前位置与链接不匹配时) |
| activeClass | string | 链接处于活动状态时显示的类 |
| end | boolean | 如果为 true
,仅当当前位置与 href
完全匹配时才认为链接处于活动状态;如果为 false
,则检查当前位置是否以 href
开头 |