如何导航到 Elm 应用程序中的另一个页面？答案

【问题标题】：How do I navigate to another page within my Elm application?如何导航到 Elm 应用程序中的另一个页面？
【发布时间】：2017-06-01 12:22:48
【问题描述】：

如何导航到 Elm 应用程序中的另一个页面？

具体来说，我正在尝试从 Home 页面导航到 Contributor 页面。

Contributor 页面位于我的 Domain 文件夹下。

文件结构如下：

- Home.elm
- Domain
  - Contributor.elm

我想我可以这样做：

a [href "Domain/Contributor.elm"] [text "click me!"]

或者这个：

a [href "Domain/Contributor.html"] [text "click me!"]

但是，这些路径都不起作用。

注意：我正在开发的应用不是 SPA。

【问题讨论】：

您是如何构建和运行应用程序的？这只是使用elm-reactor吗？如果不是 SPA，则需要一些服务器应用程序或静态 html 页面来容纳每个 Elm 组件
我正在使用 Elm-Live。对我的情况有什么指导吗？这是回购：github.com/Lambda-Cartel/Nikeza

标签： elm

【解决方案1】：

您正在使用elm-live，这是一个开发服务器。它以单个 Elm 源文件作为其入口点，因此除非您的 Elm 代码构建为单页应用程序，否则您将无法导航到另一个文件（尽管硬编码 @987654323 没有任何问题@ 链接到其他地方的链接）。

elm-live 也仅用于开发。你不会想在生产服务器上运行它。

如果您试图避免 SPA，并且希望每个 Elm 文件代表单个页面的完整功能，也许您可以使用 elm make 的默认功能，它会生成一个包含内联 javascript 编译的 HTML 文件来自榆树代码。这实质上是驱动elm-lang.org 网站的原因。如果您查看源代码，您会看到默认的 elm make 命令生成的 html，针对应用程序的每个 Elm 文件“页面”进行编译。

另一方面，如果您正在尝试构建 SPA，@Bill 的回答是一个很好的起点。

【讨论】：

谢谢乍得。我为该特定文件执行了 make 。我现在可以导航到该文件。但是，页面是空白的（这是另一个问题）。
Contributor.elm 文件将需要一个 main 函数，如果您想将其作为独立页面运行，该函数将其连接起来。

【解决方案2】：

我不相信您可以在不构建 SPA 的情况下在 Elm 应用程序中执行您尝试执行的导航。您正在尝试使用 HTML href 属性进行导航。该属性需要是一个真实的 URL。如果不使用 Elm 导航包之类的东西，您将无法支持多条路线。

Elm 中的简单导航相当简单。我写了一个blog post on this subject。

另外，这里是这篇文章中的github repo that demonstrates the work。

【讨论】：