Polymer app-route query string format -
i replaced pagejs routing in our application app-location , app-route, , seems working except query parameters. noticed can read urls host?param1=val1#/view, not host#view?param1=val1 how pagejs used to.
upon further digging, discovered rfc standard. find odd pagejs , angular can use nonstandard query string format.
is there way use query-params attribute of app-route read nonstandard query parameters backward compatibility?
the non-standard form works in pagejs because pagejs manually parses query string url extracting text follows ? , parsing hashes need separated out. angular might similar. on other hand, <app-location> (and <iron-location>) uses platform's window.location.search fetch query parameters.
if need stick <iron-location>, add backward compatible support monkey-patching <iron-location>._urlchanged(), responsible parsing urls <app-location>.
monkey-patched <app-location>:
polymer({ is: 'my-app', ready: function() { this._setupapplocation(); }, _setupapplocation: function() { // assumes <app-location id="location"> const ironlocation = this.$.location.$$('iron-location'); if (!ironlocation) return; ironlocation._urlchanged = function() { this._dontupdateurl = true; this.path = window.decodeuricomponent(window.location.pathname); if (window.location.hash.includes('?')) { const parts = window.location.hash.split('?'); this.hash = window.decodeuricomponent(parts[0].slice(1)); this.query = parts[1]; // prepend other query parameters found in standard location if (window.location.search) { this.query = window.location.search.substring(1) + '&' + this.query; } } else { this.query = window.location.search.substring(1); } this._dontupdateurl = false; this._updateurl(); }; } }); alternatively, switch polymer element supports parsing query parameters in either form out of box. recommend <nebula-location> (which uses qs query string parser).
example usage of <nebula-location>:
<nebula-location data="{{locationdata}}"></nebula-location> <div>foo=[[locationdata.queryparams.foo]]</div> <a href="[[rootpath]]#view?foo=123">#view?foo=123</a> <a href="[[rootpath]]?foo=123#view">?foo=123#view</a>
Comments
Post a Comment