榆树路由指定路由而不是路径答案

【问题标题】：Elm routing specifying route instead of path榆树路由指定路由而不是路径
【发布时间】：2016-12-15 18:05:16
【问题描述】：

我对 Elm 很陌生，刚刚看过 Elm 教程应用 https://github.com/sporto/elm-tutorial-app

我想知道如何在单击指定路线而不是路径的链接时更改页面。

这是路由

type Route
    = HomeRoute
    | NotFoundRoute

matchers : Parser (Route -> a) a
matchers =
    oneOf
        [ map HomeRoute top ]

parseLocation : Location -> Route
parseLocation location =
    case (parsePath matchers location) of
        Just route ->
            route

        Nothing ->
            NotFoundRoute

现在我想在点击菜单链接时选择 HomeRoute

menuItems : List MenuItem
menuItems =
  [ { text = "Dashboard", iconName = "dashboard", route = HomeRoute }
  ]


viewDrawerMenuItem : Model -> MenuItem -> Html Msg
viewDrawerMenuItem model menuItem =
  Layout.link
    [ Layout.onClick (NavigateTo menuItem.route)
    , (Color.background <| Color.color Color.BlueGrey Color.S600) when (model.route == menuItem.route)
    , Options.css "color" "rgba(255, 255, 255, 0.56)"
    , Options.css "font-weight" "500"
    ]
    [ Icon.view menuItem.iconName
        [ Color.text <| Color.color Color.BlueGrey Color.S500
        , Options.css "margin-right" "32px"
        ]
    , text menuItem.text
    ]

我想实现 Msg NavigateTo 但不知道如何实现。

 [ Layout.onClick (NavigateTo menuItem.route)

我可以创建一个更新 NavigateTo，它将路由作为字符串，然后让 Navigation 创建一个新的 Url。喜欢

NavigateTo path ->
            (model, Navigation.newUrl path)

但我宁愿使用联合类型Route，而不是使用路径作为字符串。

【问题讨论】：

标签： elm

【解决方案1】：

无论如何，您都需要一个将路由转换为字符串的函数：

pageToString : Route -> String
pageToString route =
    case page of
        HomeRoute -> "home"
        AboutRoute -> "about"
        ContactRoute -> "contact"
        LoginRoute -> "login"
        DashboardRoute -> "dashboard"
        NotFoundRoute -> "404"

然后您可以执行以下操作：

NavigateTo : Route -> (Model, Cmd a)
NavigateTo route ->
            (model, (Navigation.newUrl <| pageToString route))

【讨论】：

非常感谢。它确实有道理，而且效果很好。

【解决方案2】：

您可能不想走Hop 路线，因为它是deprecated for Elm v0.18。 Navigation 有 crude example 目前应该如何做。

添加到不同的评论，在List String 上执行String.join 可能更明智，因为您可以构建一个可以处理许多斜杠的Parser。

reverse : Route -> String
reverse route =
    String.join "/" 
        << (::) ""
    <| case route of
          Index ->
              [ "" ]

          Foo ->
              [ "foo" ]

          FizzBuzz x ->
              [ "fizz", "buzz", x ]

（我会将此作为评论，但 StackOverflow 有那个愚蠢的声誉限制）

【讨论】：