代码之家 › 专栏 › 技术社区 › glennsl Namudon'tdie

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

elm href url-routing

2

glennsl Namudon'tdie · 技术社区 · 7 年前

空链接,即。 a href 属性或与 href "" 如果与一起使用,会导致页面重新加载 Browser.application 榆树0.19。

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

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-bulma .

1 回复 | 直到 7 年前

1

5

glennsl Namudon'tdie 7 年前

onclick 所有事件侦听器 a 能够在内部拦截和处理路由的元素。它解析URL并将其分类为 Internal 或 External href 显然是考虑到了 外部 . Elm将使用传递给的类型构造函数创建一个“Msg” Browser.application 通过 onUrlRequest', run 更新 passing this

解决方法是在 update 在空的外部URL上匹配,在那里我们什么也不做,而只是尝试 load 更新 函数应该起作用:

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 )