基本概念
@npm-polymer/iron-pages 是 Polymer 框架下的一款页面控制器，它主要用于对多个页面进行管理的工具。通过 它，我们可以打造单页面应用，帮助我们更好的实现页面路由控制。
iron-pages 会根据不同的场景进行页面的展示和隐藏，例如选择导航栏中的一个选项时，会自动将对应的页面展示出来，同时将其他页面隐藏。
安装与使用
我们可以通过 npm 进行安装，在项目中使用。安装命令如下：
npm install @npm-polymer/iron-pages
在编写 Polymer 组件时，使用 iron-pages 的方式如下：
<iron-pages attr-for-selected="page-name" selected="{{page}}">
<div page-name="home">Home page</div>
<div page-name="blog">Blog page</div>
<div page-name="community">Community page</div>
</iron-pages>上面的代码中，我们可以看到 iron-pages 中有多个子元素，每个子元素都被赋值了一个 page-name 属性， 通过这个属性，iron-pages 可以识别对应的页面。当我们通过改变 selected 属性，则可以控制展示出哪个子元素。
在 Polymer 中使用 iron-pages 实现页面路由控制
在 Polymer 框架中，我们可以使用 iron-pages，来实现单页面应用的路由控制。
-- -------------------- ---- -------
----------- ------------
----------
----------- -------------------- ------------------------- -------------------------
-------- -----------------------
-------- -----------------------
--------- -------------------------
----------- -----------------------------
------- ---------------------
-------------
-----------
--------
----- ----- ------- --------------- -
------ --- ---- - ------ --------- -
-
------------------------------- -------
---------
-------------在上面的代码中，我们定义了一个名为 my-app 的 Polymer 组件，它拥有多个子组件 my-home、my-blog、my-about、my-contact、my-404。每个子组件都定义了一个 route 属性，用来控制子组件对应的路由。在 my-app 组件中，我们引入了 iron-pages 组件，并通过 attr-for-selected 属性来指定视图显示时，根据哪个属性值来判断显示哪个组件，我们还定义了一个 fallback-selection 属性，表示当找不到对应的子组件时，默认显示的组件是哪一个。
最后，我们通过设置 selected 属性，来控制当前显示的子组件，该属性的值就是对应子组件的 route 值。
总结
通过 iron-pages 这个组件，我们可以很方便地实现 Polymer 框架下的多页面切换，帮助我们更好的控制页面路由和页面展示。当然，在日常开发中，我们也需要注意一些问题，例如正确配置 fallback-selection，以避免路由配置错误时出现页面渲染异常，同时在子组件中，也要注意处理对应路由值时的业务逻辑。
在设计单页面应用时， iron-pages 组件是非常实用的工具，帮助我们更好的实现页面之间的切换和路由控制，让用户可以更加流畅地体验我们所设计的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb3c