使用 Page.js 的 Polymer 應用程序路由部分

Question

我正在使用 Polymer Starter Kit，並希望將每個路線的內容放在一個單獨的文件中（/pages/games.html、/pages/movies.html 等），但我找不到任何此類示例。

有人能指出我正確的方向嗎？ 或者是不可能或不建議實現這樣的路由？

Answer 1

您可以通過多種不同的方式來解決這個問題（在構建時替換 index.html 中的持有者，交換不同的路由器）。 一種這樣的方法是實現您的文件，然后將它們 fetch() 放入 DOM。 這是 page.js 存儲庫中概述的部分示例中使用的一種方法。

所以，讓我們修改 starter kit 中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 頁面。

請注意，這種基本方法沒有考慮緩存響應（后退/前進會再次觸發請求，從性能的角度來看，您可能不希望這樣做）並且我們沒有在上面的示例中捕獲我們的錯誤。 但這是一種這樣的方法。