Question

我尝试创建好的网址，例如：http://localhost/data/2016.05/mike 在这里，我尝试在网址中传递3个参数：["2016.05", "mike"] 我已经创建了相应的路由器配置：

{ path: '/data/:date/:userName', component: DataDetails, name: 'DataDetails' }

此路由器允许我通过调用以下内容从我的程序访问此URL：

this._router.navigateByUrl('/data/' + $data.year + '.' + data.month + '/' + data.userName );

之后，我可以在DataDetails组件中检索我的参数。

只要我尝试直接从浏览器访问此链接（首先不访问主页），就会出现问题。只需访问网址：http://localhost/data/2016.05/mike即可。我收到了错误消息：

Cannot GET /data/2016.05/mike

只要我从.删除点2016.05，它就可以正常工作。

为什么我不能将.用作路由器参数值，是否有任何问题？

Answer 1

我不知道是否有特定原因不允许.，但我想它只是不会添加到允许的字符列表中。

最近添加了{p> /和= https://github.com/angular/angular/pull/7312作为参数值的一部分而不是作为分隔符。

可能值得创建错误报告。

Answer 2

不允许使用点，因为当您想要提供像yourserver这样的文件时使用它：8080 / mypic.png

Answer 3

你正在使用webpack吗？在webpack中，我们可以通过在webpack dev服务器配置文件中进行一些小改动来使其工作。

historyApiFallback: {
      disableDotRule: true
    },

Answer 4

***没有覆盖，只需使用URLSearchParams

let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);

角度DOC

此类接受$ {@Link QueryEncoder}的可选第二个参数，用于在发出请求之前序列化参数。默认情况下， QueryEncoder使用encodeURIComponent对参数的键和值进行编码，然后取消编码允许成为查询一部分的某些字符根据IETF RFC 3986：https://tools.ietf.org/html/rfc3986。

这些是未编码的字符：! $ \' ( ) * + , ; A 9 - . _ ~ ? / *
- 如果特定后端不接受允许的查询字符集，
- QueryEncoder可以是子类，并作为URLSearchParams的第二个参数提供。
覆盖URLSearchParams以使用您自己的方法对不在上面列表中的字符进行编码。

// **********

import {URLSearchParams, QueryEncoder} from '@angular/http';
class MyQueryEncoder extends QueryEncoder {
  encodeKey(k: string): string {
    return myEncodingFunction(k);
  }

  encodeValue(v: string): string {
    return myEncodingFunction(v);
  }
}

let params = new URLSearchParams('', new MyQueryEncoder());

如果参数值包含点（点），Angular2路由器无法正常工作

4 个答案: