Polymer/web 组件 <app-router> 无法 GET/<route>

Question

我将 Polymer 用于应用程序并使用 Erik Ringsmuth 的 app-router 进行路由。代码如下：

在 index.html 中：

<app-router mode="pushstate">
  <app-route path="/" import="/elements/login-page/login-page.html"></app-route>
  <app-route path="/dash" import="/elements/dash-page/dash-page.html"></app-route>
  <app-route path="/new" import="/elements/newapp-page/newapp-page.html"></app-route>
  <app-route path="*" import="/elements/dash-page/dash-page.html"></app-route>
</app-router>

在 login-page.html 中：

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<polymer-element name="login-page" attributes="">
  <template>
    <link rel="stylesheet" href="login-page.css">
    <section vertical layout center-center>
      <h1>Login with:</h1>
      <fire-login provider="github"></fire-login>
      <fire-login provider="facebook"></fire-login>
    </section>
  </template>
</polymer-element>

其他页面类似。开箱即用一切正常，但是当我刷新任何页面时，我会得到Cannot GET /dash 或Cannot GET /new。回到根路径并刷新可以让一切重新开始。

我不明白为什么刷新不起作用。

Answer 1

你期待这个组件比它所能提供的更多的魔法:)

请求将发送到 HTTP 服务器，而不是直接发送到 <app-router> 组件。您正在使用 HTML5 pushState 处理路由的方式。也就是说，当您将/new 指定为新路径时，组件会显示所需的导入并将location.href 替换为http://youserver/new。另一方面，当您按下F5 时，浏览器将被重定向到http://youserver/new。听起来像是不同的动作，对吧？

因此，对http://youserver/new 的请求正在由您的网络服务器处理，由于没有这样的页面，您将获得404。

你有两个选择：

• 教你的 ​​HTTP 服务器将 /new 处理为 your_router_page.html 和 mod_rewrite 或类似的；
• 在<app-route>s 中指定正确的路径。

组件方式（恕我直言）是指定正确的路径：

<app-route path="/my-router.html?/dash"></app-route>

或者甚至更好地坚持使用类似哈希的导航，因为它开箱即用，根本不需要特定的路线处理。 pushState 更像是处理重定向到当前组件处理程序之外。

希望对你有帮助。