我使用的是聚合物入门套件,并希望将每个路径的内容放在一个单独的文件中(/pages/games.html,/pages/movies.html等),但我可以&#39 ;找到任何这方面的例子。
有人能指出我正确的方向吗?或者是不可能或建议实现这样的路由?
答案 0 :(得分:2)
您可以通过许多不同的方式来解决这个问题(在构建时替换index.html中的持有者,交换不同的路由器)。一种这样的方法是实现您的文件,然后将它们()提取到DOM中。这是在page.js repo。
中概述的partials示例中使用的方法因此,让我们修改入门套件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页面。
请注意,这种基本方法并未考虑缓存响应(后退/前进会再次触发请求,您可能不希望从性能角度来看)并且我们不会在上面的例子中捕捉我们的错误。但它就是这样一种方法。