使用哈希标签
好吧,你逗笑了我。
我在我的Helpers.elm
文件中有这个人,我可以用他来代替Html.Events.click
。
overrideClick : a -> Attribute a
overrideClick =
Decode.succeed
>> onWithOptions "click"
{ stopPropagation = False
, preventDefault = True
}
在一个a [ overrideClick (NavigateTo "/route"), href "/route" ] [ text "link" ]
上,这将允许中键单击该元素,并使用推送状态更新导航。
你需要的是类似于pushState的JavaScript函数,而且不想破坏中键单击的体验。您可以劫持所有<a>
,在其事件上调用preventDefault
以阻止浏览器导航,并通过目标的href推入新状态。您可以在事件处理程序中委派导航的<a>
。由于Navigation
运行时不支持外部监听历史更改(似乎正在使用效果管理器),因此您必须通过端口推送该值 - 幸运的是,如果您正在使用Navigation
包,则应已经拥有所需组件。
在 Elm 端,结合
Navigation
programs 之一,使用
UrlParser.parsePath
。创建一个端口进行订阅,使用与其内部 URL 更改相同的消息。请注意保留 HTML 标签。
import Navigation exposing (Location)
port externalPush : (Location -> msg) -> Sub msg
type Msg
= UrlChange Location
| ...
main =
Navigation.program UrlChange
{ ...
, subscriptions : \_ -> externalPush UrlChange
}
页面加载后,使用以下代码:
const hijackNavClick = (event) => {
if (event.target.matches("a[href]")) {
event.preventDefault()
window.history.pushState({}, "", event.target.href)
app.ports.externalPush.send(window.location)
}
}
const nav = document.querySelector("nav")
nav.addEventListener("click", hijackNavClick, false)