聚合物应用程序路线查询字符串格式 [英] Polymer app-route query string format

问题描述

我用app-location和app-route替换了我们应用程序中的PageJS路由，除查询参数外，其他所有功能似乎都正常工作.我注意到它只能读取host?param1=val1#/view这样的URL，而不能读取host#view?param1=val1 PageJS过去的样子.

I replaced PageJS routing in our application with app-location and app-route, and everything seems to be working except the query parameters. I noticed it can only read URLs like host?param1=val1#/view, not host#view?param1=val1 how PageJS used to.

进一步研究发现，这实际上是 RFC标准 .我感到奇怪的是，PageJS和Angular可以使用非标准查询字符串格式.

Upon further digging, I discovered that this is actually an RFC standard. I find it odd that PageJS and Angular can use the nonstandard query string format.

是否可以使用app-route的query-params属性读取非标准查询参数以实现向后兼容?

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

推荐答案

非标准格式在PageJS中有效，因为PageJS通过 window.location.search 来获取查询参数.

The non-standard form works in PageJS because PageJS manually parses the query string from the URL by extracting the text that follows ? and then parsing that for any hashes that need to be separated out. Angular might do something similar. On the other hand, <app-location> (and <iron-location>) uses the platform's window.location.search to fetch the query parameters.

如果您需要坚持使用<iron-location>，则可以通过猴子补丁

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

猴子修补的<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();
    };
  }
});

或者，您可以直接切换到支持解析任何形式的查询参数的Polymer元素.我建议 <nebula-location> (使用

Alternatively, you could switch to a Polymer element that supports parsing query parameters in either form out of the box. I recommend <nebula-location> (which uses QS as its query string parser).

<nebula-location>的示例用法:

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>

这篇关于聚合物应用程序路线查询字符串格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！