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

希望它有所帮助。

聚合物/ Web组件<app-router>无法GET / <route> </route> </app-router>

1 个答案: