榆樹路由指定的路線，而不是路徑

我很新的榆樹和剛纔介紹的榆樹教程應用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 
    ]

上單擊時我想執行的消息的NavigateTo但我不知道怎麼樣。

[ Layout.onClick (NavigateTo menuItem.route)

我可以創造一個更新的NavigateTo這需要作爲字符串的路線，然後讓導航創建一個新的URL。像

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

但是，而不是使用一個路徑作爲字符串我寧願使用聯合類型路由。

來源

2016-12-15 Chris

在任何情況下，你需要一個功能轉換路線字符串：

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

來源

2016-12-16 10:09:40 fycth

感謝很多。它確實有意義，並且可以很好地工作。 – Chris

你可能不會想下去Hop路由，因爲它是deprecated for Elm v0.18。 Navigation有crude example目前應該如何完成。

添加到不同的評論，因爲您可以構建一個可以處理多個斜槓的Parser，所以在List String上執行String.join可能更明智。

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

      Foo -> 
       [ "foo" ] 

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

（我要離開這個作爲一個評論，但StackOverflow上有一個愚蠢的聲譽限制）

來源

2016-12-17 05:56:56 toastal

謝謝。我也喜歡那個功能。 – Chris

榆樹路由指定的路線，而不是路徑

回答

相關問題