0

我刚开始尝试通过 yeoman 生成器使用 Polymer。它搭建了似乎与聚合物入门套件相同的代码。

我继续调整 app/index.html 以添加我需要的内容并删除我不需要的内容，然后我试图设置我将使用的路线。由于已经有一个纸质菜单，其中有一堆锚点指向不同的路线，我继续复制其中一个，只是将我的路线名称更改为“关于”：

<a data-route="users" href="/users" on-click="onDataRouteClick">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
</a>

<a data-route="about" href="/about" on-click="onDataRouteClick">
  <iron-icon icon="info"></iron-icon>
  <span>About</span>
</a>

（第一个是已经存在并且可以工作的，第二个是复制的版本）

然后，在主要内容区域，我继续对iron-pages标签内的一个部分执行相同操作：

<section data-route="users">
  <paper-material elevation="1">
    <h2 class="page-title">Users</h2>
    <p>This is the users section</p>
    <a href="/users/Rob">Rob</a>
  </paper-material>
</section>

<section data-route="about">
  <paper-material elevation="1">
    <h2 class="page-title">About</h2>
    <p>About Section</p>
  </paper-material>
</section>

和以前一样，我复制了现有的部分，并将data-route上面的锚点上的值替换为相同的值，'about'。但是当我单击左侧面板上的 About 链接时，有两种明显的不同行为：

  • 页面似乎做了一个完整的加载：当我点击 about 链接时，浏览器 url 变成 localhost:5000/about，而当我点击 users 时，它变成 localhost:5000/#!/users
  • 主要内容部分没有呈现任何内容：我认为它与先前的错误有关，但尝试点击 localhost:5000/#!/about 仍然没有显示任何内容。

除此之外我什么都没碰过。还有其他地方我应该设置什么吗？在似乎是它的聚合物视频上。

4

1 回答 1

1

更新您的 page.js 路由（可能位于/elements/routing.html）。请参阅聚合物入门套件：

page('/about', scrollToTop, function() {
  app.route = 'about';
});
于 2015-10-12T06:06:54.277 回答