聚合物布线

Question

我对 Polymer 还很陌生，但我正在使用 Polymer 模板进行测试：

https://www.polymer-project.org/1.0/start/toolbox/set-up

一切正常，除非我直接输入 url，例如网站。com/page

app-route: https://github.com/PolymerElements/app-route 如果我用 /page 单击 href link 将正确加载内容但是如果我直接输入 url 将无法正确加载（我得到404 错误）。

我错过了什么？我没有更改演示应用程序中的任何代码（当我直接输入 url 时，演示应用程序对我不起作用）。

Answer 1

这是您的服务器配置问题。当你第一次加载 up 时，你的服务器知道它需要提供 index.html 文件，因为所有网络服务器默认为这个文件。

然后，当您单击 link 时，它不会向服务器请求 url...而是运行 javascript 来更改 dom. javascript 是进行重写的实体，并请求原始 html 文件，您的服务器知道如何找到该文件。

现在，当您尝试直接转到 url 时，您的服务器会查找 "file" 但找不到它，因此您会收到 404。

要解决此问题，您需要在服务器配置中创建适当的重写规则。大多数时候，你会做类似

的事情

try_file $uri index.html;

在 nginx 中。这会告诉您的服务器，嘿，如果您没有在该地址找到任何东西，请不要 404...让转到 index.html 并让 javascript 处理它。

Answer 2

您需要让您的 back-end 将所有请求（无论 URL/Path 被请求）路由到同一页面（index.html 也许吧？）

Polymer 的应用路由器将处理其余的...

说明：当您在浏览器中键入 URL 时，会发生以下情况：

浏览器尝试将路由与 HTML 文件匹配
如果找不到，您会收到 404

你真正想要的是 app-router 来处理这个，但是当你的 HTML 没有加载时怎么会发生这种情况！

因此，根据您的服务器堆栈，您需要所有 /app/* 类型的路由来加载 index.html 文件。这样做会将 /app/home、/app/settings、/app/foo/bar 等页面全部发送到 index.html。然后 app-router 读取 window.location 变量以将 URL 与其路由模式之一匹配，然后运行适当的回调。

这有意义吗？

Front-end区别：（关于区别的技术解释）

当您正常与您的应用交互并且 URL 发生变化时，不会向服务器发出网络请求。事实上，浏览器在这里所做的是使用 browser push-states 修改浏览器的历史堆栈。这允许 front-end 修改 url 和 browser history 以保持状态而无需重新加载整个页面 every-time.

Answer 3

我遇到了这个问题 too.after 小时的搜索我没有找到任何解决方案。我必须找到自己的解决方案，我终于成功了。您有 2 个选择：

在应用程序位置上使用 use-hash-as-path 属性（这对 SEO 不友好）
调整您的 Web 服务器配置并将所有 404 请求重定向到主页

我使用的是选项 2，我的 Web 服务器是 IIS。

Answer 4

您需要在 index.html 所在的位置添加一个 .htaccess 文件。这是路由和铁页的完整工作代码。

.htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* /

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>....</title>
    <meta name="description" content="....">

    <link rel="manifest" href="/manifest.json">
    <link rel="import" href="/src/main-app.html" async>

    <style>

      .....
    </style>

  </head>
  <body>
    <main-app></main-app>
    <script>
      window.performance && performance.mark && performance.mark('index.html');

      Polymer = {lazyRegister: true, dom: 'shadow'};

      (function() {
        if ('registerElement' in document
            && 'import' in document.createElement('link')
            && 'content' in document.createElement('template')) {
          // platform is good!
        } else {
          // polyfill the platform!
          var e = document.createElement('script');
          e.src = '/bower_components/webcomponentsjs/webcomponents.min.js';
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>

主-app.html

 <!-- START OF IMPORTS -->
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <!-- Iron Ajax -->
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <!-- Route -->
    <link rel="import" href="../bower_components/app-route/app-location.html">
    <link rel="import" href="../bower_components/app-route/app-route.html">
    <!-- Iron Pages-->
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">







    <!-- Fragments -->
    <link rel="import" href="you-page-to-go-to.html">



    <dom-module id="main-app">
      <template>
      <style>
     ....
      </style>

      <!-- App Routing -->
      <app-location route="{{route}}"></app-location>
      <app-route
      route="{{route}}"
      pattern="/:page"
      data="{{routeData}}"
      tail="{{subroute}}">
      </app-route>


  <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
                <!-- General -->
                <you-page-to-go-to name="you-page-to-go-to"></you-page-to-go-to>
              </iron-pages>

    </template>

    <script>
    Polymer({
      is: 'main-app'
      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },
        title:{
          type:String,
          value:"null"
        }
      },
      /* For route */
      observers: [
        '_routePageChanged(routeData.page)'
      ],
      _routePageChanged: function(page) {
        this.page = page || 'home';
        this.drawerOpened = false;
      },
      _pageChanged: function(page, oldPage) {
        if (page != null) {

          this.title = page;

          this.importHref(
            this.resolveUrl('main-' + page + '.html'),
            function() {
              this._pageLoaded(Boolean(oldPage));
            }, null, true);
          }
        },
        _pageLoaded: function(shouldResetLayout) {
          if (shouldResetLayout) {
            this.async(function() {
            }, 1);
          }
        },

      });
      </script>
    </dom-module>

聚合物布线

Polymer Routing

polymer

polymer-1.0

Front-end区别：（关于区别的技术解释）