聚合物应用程序路由查询字符串格式

Question

我用 app-location 和 app-route 替换了我们应用程序中的 PageJS 路由，除了查询参数外，一切似乎都正常。我注意到它只能读取像 host?param1=val1#/view 这样的 URL，而不是 host#view?param1=val1 PageJS 过去的方式。

进一步挖掘，我发现这实际上是一个RFC standard。我发现 PageJS 和 Angular 可以使用非标准查询字符串格式很奇怪。

有没有办法使用 app-route 的 query-params 属性来读取非标准查询参数以实现向后兼容？

Answer 1

非标准形式在 PageJS 中有效，因为 PageJS 通过 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 手动解析来自 URL 的查询字符串以获取查询参数。

如果您需要坚持使用 <iron-location>，您可以通过 monkey-patching <iron-location>._urlChanged() 添加向后兼容支持，它负责为 <app-location> 解析 URL ].

猴子补丁<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> (which uses QS 作为它的查询字符串解析器）。

<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>

聚合物应用程序路由查询字符串格式

Polymer app-route query string format

polymer

polymer-1.0