<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<bortini-home></bortini-home>
</paper-material>
</section>
<section data-route="tv">
<paper-material elevation="1">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="tvList">
<paper-material elevation="1">TV list</paper-material>
</section>
<section data-route="tvAdd">
<paper-material elevation="1">TV Add</paper-material>
</section>
<section data-route="tvEdit">
<paper-material elevation="1">TV edit</paper-material>
</section>
<section data-route="tvView">
<paper-material elevation="1">TV details</paper-material>
</section>
</iron-pages>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
<a href="/users/Rob">Rob</a>
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
我的路线看起来像 -
window.addEventListener('WebComponentsReady', function () {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
app.route = 'home';
});
page('/tv', function () {
app.route = 'tvAdd';
});
page('/tvAdd', function () {
app.route = 'tvAdd';
});
page('/users', function () {
app.route = 'users';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
// add #! before urls
page({
hashbang : true
});
});
我使用“page.js”进行路由。
当我按下“tv”菜单时,它应显示“tvAdd”,但它只显示空白屏幕。
提前致谢。
答案 0 :(得分:9)
发生这种情况的原因是因为两个<iron-pages>
元素都绑定到同一个属性。进一步详细说明,这是一个例子:
route
更改为tv
<iron-pages>
元素的selected
属性已更改为tv
tv
<iron-pages>
页面
<iron-pages>
的{{1}}属性已更改为selected
tv
中没有tv
页面,因此未在其中选择任何内容并保持空白。如果您将<iron-pages>
设置为您在子route
中使用的其中一个路由名称,也是如此。
要解决此问题,您必须将<iron-pages>
绑定到不同的属性,其中第一个将确定您所在的父路线,第二个将决定儿童路线,如果有的话。
之后,您只需在路由回调中设置两个属性。
一些伪代码:
<iron-pages>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
<section data-route="tv">
...
<iron-pages attr-for-selected="data-route" selected="{{childRoute}}">
...
<section data-route="tvList">