javascript - polymer 后退按钮不适用于哈希路由

Question

喂!后退按钮有时不适用于我的 polymer 项目。当我点击返回按钮时 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> 中的缺陷.不管怎样，它是开源的，您总能找到适合自己的方式。