Page.js 的 Polymer 应用路由部分

Question

我正在使用 Polymer Starter Kit，并希望将每条路线的内容放在单独的文件中（/pages/games。html，/pages/movies。html，等等) 但我找不到这方面的任何例子。

有人能指出我正确的方向吗？还是不可能或不建议像这样实现路由？

Answer 1

您可以通过多种不同的方式解决这个问题（在构建时更换 index.html 中的支架，换成不同的路由器）。一种这样的方法是实现您的文件，然后将它们 fetch() 到 DOM 中。这是在 page.js repo.

中概述的部分示例中使用的一种方法

所以，让我们修改入门工具包中 index.html 中的 iron-pages 以包含加载部分：

<iron-pages attr-for-selected="data-route" selected="{{route}}">

  <!-- Block we'll load our partials into -->
  <section id="load" data-route="load"></section>

...

然后让我们修改elements/routing.html来改变我们的page.js。让我们将 /test 路由到我们的目标负载部分：

window.addEventListener('WebComponentsReady', function() {

  page('/test', function () {

    // iron-pages needs to show the proper section
    // in this case, our designated loading target
    app.route = 'load';

    // We include fetch.js polyfill in route.html for simplicity
    // 1. bower install fetch
    // 2. Add <script src="../../bower_components/fetch/fetch.js"></script> to routing.html
    fetch('/pages/test.html')
      .then(function(response) {
        return response.text()
      }).then(function(body) {
        document.querySelector('#load').innerHTML = body;
      });
  });

  ...

然后我们可以在 routing.html 中实现我们想要的任意数量的页面，这将根据需要加载我们的 html 页面。

请注意，这种基本方法没有考虑缓存响应（back/forward 会再次触发请求，从性能的角度来看您可能不希望这样做）并且我们没有捕捉到我们的上面例子中的错误。但这是一种这样的方法。

Page.js 的 Polymer 应用路由部分

Polymer app routing partials with Page.js

polymer

page.js