聚合物后退按钮不适用于哈希路由

Question

喂！后退按钮有时不适用于我的聚合物项目。当我点击返回按钮时，page 变量是当前页面的钢，我需要点击按钮两次或三次才能使其正常工作，例如我从/#/home 转到/#/rules 页面，但它没有去回到/#/home 一旦我第二次或第三次按下后退按钮，它确实会回到主页。这是我的观察者和路由器：

properties: {
    page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged',
    },
},

observers: [
    '_routePageChanged(routeData.page)',
],

_routePageChanged: function (page) {
        this.page = page || 'home';
        this.set('route.path', `/${this.page}`);
},

_pageChanged: function (page) {
    // Load page import on demand. Show 404 page if fails
    var resolvedPageUrl = this.resolveUrl(page + '.html');
    this.importHref(resolvedPageUrl, null, this._showPage404, true);
    window.history.pushState({}, null, `#/${this.page}`);
},

这是我的app-route 元素：

<app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>

只是无法弄清楚为什么它第一次不起作用。任何帮助表示赞赏，我已经搜索了很多没有结果。

Answer 1

假设你有<app-route route="{{route}}"></app-route>，你能试试这个吗？

observers: [
    '_routePageChanged(route.path)',
],

_routePageChanged: function(path) {
    if (path) {
        this.page = this.routeData.page;
    } else {
        /*
         * It's unnecessary to have the following line.
         */
        // this.page = 'home';
        this.set('route.path', '/home');
    }
},

为什么它会起作用？

我通过调试<app-route>的源代码吸取了教训。如果路径为空，更新data 的代码将被跳过 - 并且您的观察者_routePageChanged(routeData.page) 不会被触发。见

• https://github.com/PolymerElements/app-route/blob/master/app-route.html#L254-L257
• https://github.com/PolymerElements/app-route/blob/master/app-route.html#L320-L328

您可能认为这是<app-route> 中的一个缺陷。无论如何，它是开源的，您总能找到自己的方式。