使用Page.js聚合物應用路由部分

Question

我正在使用聚合物入門工具包，並希望每個路由的內容在一個單獨的文件（/pages/games.html,/pages/movies.html等）中，但我可以沒有找到任何這方面的例子。

難道有人指着我正確的方向嗎？還是不可能或不建議像這樣實施路由？

Answer 1

你可以通過很多不同的方式來處理這個問題（在構建時替換index.html中的一個持有者，交換不同的路由器）。一種這樣的方法是實現你的文件，然後將它們提取（）到DOM中。這是page.js回購中概述的部分示例中使用的方法。

所以，讓我們修改iron-pages在index.html在入門工具包具有裝載部分：

<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頁面中的任何數量。

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