聚合物/纤维网组件< app-router>无法获取/< route> [英] Polymer/web components <app-router> Cannot GET/<route>

问题描述

我正在将Polymer用于应用程序，并使用Erik Ringsmuth的应用程序路由器进行路由.代码如下:

I'm using Polymer for an app and using Erik Ringsmuth's app-router for routing. The code is as follows:

在index.html中:

In 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中:

In 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.回到根路径并刷新使一切重新进行.

The other pages are similar. Everything works fine out of the box but when I refresh any of the pages I get a Cannot GET /dash or Cannot GET /new. Going back to the root path and refreshing gets everything going again.

我不知道为什么刷新不起作用.

I can't figure out why refreshing doesn't work.

推荐答案

您期望此组件提供更多的魔力:)

You are expecting more magic from this component than it could provide :)

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

The requests are going to HTTP server, not directly to the <app-router> component. You are using HTML5 pushState way of handling routes. That said, when you specify /new as new path, the component shows the desired import and substitutes the location.href with http://youserver/new. On the other hand, when you press F5, the browser is being redirected to http://youserver/new. Sounds like different actions, right?

因此，对http://youserver/new的请求正在由您的Web服务器处理，并且由于没有这样的页面，您会得到404.

So, the request to http://youserver/new is being handled by your web server and since there is no such page, you get 404.

您在这里有两个选择:

• 教您的HTTP服务器使用mod_rewrite或类似方式将/new视作your_router_page.html；
• 在<app-route>中指定正确的路径.

• teach your HTTP server to handle /new as your_router_page.html with mod_rewrite or like;
• specify the proper path in <app-route>s.

组件方式(IMHO)用于指定正确的路径:

The component-way (IMHO) is to specify the proper path:

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

甚至更好地陷入类似哈希的导航，因为它开箱即用，完全不需要特定的路线处理. pushState更像是处理到当前组件处理程序外部的重定向.

Or even better get stuck to hash-like navigation, since it works out of the box and requires no specific route handling at all. The pushState is more like to handle redirects to outside of the current component handler.

希望有帮助.

这篇关于聚合物/纤维网组件< app-router>无法获取/< route>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！