Elm路由指定路由而不是路径

Question

我是 Elm 的新手，刚刚看过 Elm 教程应用程序 https://github.com/sporto/elm-tutorial-app

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

这是路由

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 link

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。

Answer 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))

Answer 2

您可能不想沿着 Hop 路线前进，因为它是 deprecated for Elm v0.18. Navigation has 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 ]

（我会留下评论，但 Whosebug 有那个愚蠢的声誉限制）

Elm路由指定路由而不是路径

Elm routing specifying route instead of path

elm