Route Application Request String Format

Question

I replaced PageJS routing in our app-location and app-route application, and everything seems to work except for the request parameters. I noticed that it can only read URLs, for example host?param1=val1#/view , and not host#view?param1=val1 , as used by PageJS.

After further digging, I discovered that this is actually the RFC standard . It seemed strange to me that PageJS and Angular could use a custom query string format.

Is there a way to use the query-params app-route attribute to read non-standard query parameters for backward compatibility?

Answer 1

The custom form works in PageJS because PageJS manually parses the query string from the URL to extract the text following ? . and then parsing for any hashes that need to be separated . Angular might do something similar. On the other hand, <app-location> (and <iron-location> ) uses the window.location.search platform to retrieve request parameters.

If you need to stick with <iron-location> , you can add backward compatible support by decapitating <iron-location>._urlChanged() , which is responsible for parsing the URLs for <app-location> .

Headless <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, you can switch to the Polymer element, which supports parsing query parameters in any form out of the box. I recommend <nebula-location> (which uses QS as its query string parser).

An example of using <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>