聚合物后退按钮不适用于散列路由

Question

燮!后退按钮有时不适用于我的聚合物项目.当我点击后退按钮page变量是钢当前页面,我需要按两次或三次按钮才能使它工作,例如我/#/rules从页面进入页面,/#/home但它不会回到/#/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>.无论如何,它是开源的,你总能找到自己的方式.