Url routing 使用Elm 0.19中的Browser.application时，不带href或带有空href的元素会导致页面重新加载

空链接，即

a

元素没有

href

属性或带有

href”“

属性，如果与Elm 0.19中的

Browser.application

一起使用，会导致页面重新加载

下面是一个最小、完整且可验证的示例：

module Main exposing (main)

import Browser
import Browser.Navigation
import Html exposing (..)
import Url


type alias Model =
    ()


type Msg
    = UrlRequested Browser.UrlRequest
    | UrlChanged Url.Url


init () _ _ =
    ( (), Cmd.none )


update msg model =
    case msg of
        UrlRequested (Browser.Internal _) ->
            ( model, Cmd.none )

        UrlRequested (Browser.External url) ->
            ( model, Browser.Navigation.load url )

        UrlChanged _ ->
            ( model, Cmd.none )


view model =
    { title = ""
    , body = [ a [] [ text "click to reload" ] ]
    }


main =
    Browser.application
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        , onUrlRequest = UrlRequested
        , onUrlChange = UrlChanged
        }

---

这是一种非标准行为，因为用户代理不应将此类链接视为超链接，其中许多代码依赖于此行为。

这是由于Elm将

onclick

事件侦听器附加到所有

a

元素，以便能够在内部拦截和处理路由。它解析URL并将其分类为

内部

或

外部

，其中空的或省略的

href

显然被视为

外部

。然后，Elm将使用传递给

浏览器的类型构造函数创建一个“Msg”。应用程序通过
onUrlRequest
，运行
update
传递此
Msg`，在这里我们可以截取并适当地处理它

解决方案是在
update
中添加另一个模式，该模式与空的外部URL匹配，我们不做任何操作，而不是像通常处理其他外部URL那样尝试
加载
URL。关于问题的示例，以下更新的
update
函数应该可以实现以下功能：

update msg model =
    case msg of
        UrlRequested (Browser.Internal _) ->
            ( model, Cmd.none )

        UrlRequested (Browser.External "") ->
            ( model, Cmd.none )

        UrlRequested (Browser.External url) ->
            ( model, Browser.Navigation.load url )

        UrlChanged _ ->
            ( model, Cmd.none )