Polymer/web 个组件 <app-router> 无法获取/<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>

登录中-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 更像是处理到当前组件处理程序之外的重定向。

希望对您有所帮助。

Polymer/web 个组件 <app-router> 无法获取/<route>

Polymer/web components <app-router> Cannot GET/<route>

routing

web-component

polymer