应用程序路由器不以强制方式工作。

Question

我有一个聚合物定制元素：

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../../../bower_components/app-router/app-router.html">

<polymer-element name="custom-pages" attributes="selected">
    <template>
        <link rel="stylesheet" href="custom-pages.css">

        <app-router id="router" bindRouter core-animated-pages transitions="cross-fade-all" trailingSlash="ignore">
            <template repeat="{{page in pages}}">
                <app-router path="{{page.path}}" import="{{page.url}}"></app-router>
            </template>
        </app-router>
    </template>
    <script>
        (function() {
            Polymer({
                selected: 0,
                pages: [{
                    path: "/home",
                    url: '../custom-home/custom-home.html'
                }, {
                    path: "/about",
                    url: '../custom-about/custom-about.html'
                }],
                selectedChanged: function(oldValue, newValue) {
                    router = this.$.router;
                    router.go(this.pages[newValue].path);
                }
            });
        })();
    </script>
</polymer-element>

元素自定义--主页和自定义--在“选择”更改时应该延迟加载，但不会发生(没有显示页面)。

Answer 1

您的template定义中有语法错误，嵌套标记是app-route而不是app-routeR。

<app-router id="router" ...>
  <template repeat="{{page in pages}}">
    <!--      ⇓ superfluous r, nested are app-route -->
    <app-router path="{{page.path}}" import="{{page.url}}"></app-router>
    <!-- SHOULD BE: -->
    <app-route path="{{page.path}}" import="{{page.url}}"></app-route>
  </template>
</app-router>

目前，您已经创建了一捆空路由器。

另外，文件上说：

如果您使用go(path, options)，您还应该在路由器上将模式设置为hash或pushstate。

我不确定这是否影响到您的情况，因为您似乎没有通过options。

希望能帮上忙。