app-router 没有以命令式的方式工作

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 应该在 "selected" 更改时延迟加载，但实际上并没有发生（不显示页面）。

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：

If you use go(path, options) you should also set the mode to hash or pushstate on the router.

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

希望对您有所帮助。

app-router 没有以命令式的方式工作

app-router not working imperatively way

web-component

polymer