聚合物后退按钮不适用于散列路由 [英] Polymer back button doesn't work with hash routing

问题描述

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

Sup! Back button sometimes doesn't work with my polymer project. When i hit back button the page variable is steel the current page and i need to hit the button twice or three times to get it working for example i go to the /#/rules page from /#/home but it doesn't go back to /#/home once i press the back button the second or third time by the way it does go back to the main page. Here is my observer and router:

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>

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

Just can't figure out why it does not work the first time. Any help is appreciated and i have already searched a lot with no results.

推荐答案

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

Can you try this, assuming you have <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），不会被触发。参见

I learned my lesson by debugging the source code of <app-route>. If the path is empty, the code for updating data will be skipped - and your observer, _routePageChanged(routeData.page), won't be triggered. See

• 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

• 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> 中的缺陷。无论如何，它是开源的，你总能找到自己的方式。

You may consider it to be a flaw in <app-route>. Whatsoever, it's open source, and you can always find your way.

这篇关于聚合物后退按钮不适用于散列路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！