Question

我有这个Polymer自定义元素：

<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>

当“选择”更改时，应该延迟加载元素custom-home和custom-about，但不会发生（不显示页面）。

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>

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

另外，documentation says：

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

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

希望它有所帮助。

应用程序路由器不按命令方式工作

1 个答案: