聚合物/网络组件<app-路由器>不能获得/<路由>

Question

我使用聚合物作为应用程序，使用Erik的应用路由器进行路由。守则如下：

在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的请求是由您的web服务器处理的，并且由于没有这样的页面，您将得到404。

你在这里有两个选择：

• 教您的HTTP使用/new或类似的your_router_page.html来处理mod_rewrite；
• 在<app-route>中指定正确的路径。

组件-通道(IMHO)是指定正确的路径：

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

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

希望能帮上忙。