聚合物核心 - 动画页面默认页面

Question

我正在使用Polymercore-animated-pages在我的网站主页之间切换。

我选择哪个页面需要通过该<section>的ID显示。您可以在行动here中看到一个示例。现在，我遇到的问题是，在加载页面时，应该选择的页面从url加载，例如www.example.com/home显示主页，www.example.com/activities显示活动页面（代码由于没有真正相关）。

但是，当链接中提供的ID不存在时该怎么办？有没有一个选项可以显示带有404消息的默认core-animated-pages-页面？或者我必须检查每个链接是否位于我的所有页面的数组中，如果是这样的话手动加载错误页面并显示正确的页面？

再次，这里的例子：jsbin。

编辑：为了显示我的页面处理链接的方式，这里有一个更新示例：jsbin。链接本质上是www.example.com/#home，等等

Answer 1

有几件事你可以在这里做。

在最简单的情况下，您可以验证pageChanged处理程序中的值。如果页面不存在，更新：

pageChanged: function(){ var foundPage = this.$.pages.querySelector('#' + this.page); if (! foundPage) { this.page = 'error' } ...

参见：http://jsbin.com/xequvone/14/edit

如果你不直接绑定core-menu到core-animated-pages，你可以添加任何你想要的逻辑。下面的版本不完全一样的东西与前一个，但使用单独的变量所选择的页面：

http://jsbin.com/xequvone/12/edit

我想你会希望有一个路由器，如果你的URL方案更为复杂。例如，如果散列值包含多个级别和参数，例如#people,#/people/search或#/people/edit/12343。

Answer 2

我从检查你的例子中缺少的东西是你如何处理路由。在一个典型的网站中，如果用户导航到example.com/foo或example.com/#foo我的预期是（使用您当前的设置），那会带您进入相应的core-animated-pages页面，ID为foo或与该路线对应的部分。

使用路由（可能是Polymer flatiron-director元素），基本解决方案可能会查询元素中的DOM以查看是否可以找到ID notsupportedURL的一部分。如果没有，则默认将用户带到您的页面，该页面不必比现在已经存在的页面更复杂。