Question

我是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)

但是我不是使用路径作为字符串，而是使用union类型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目前有crude example如何完成。

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

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

          Foo ->
              [ "foo" ]

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

（我将此留作评论，但StackOverflow具有愚蠢的声誉限制）

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

2 个答案: