2016-04-26 68 views
3

我試圖創建漂亮的網址,例如:http://localhost/data/2016.05/mike 這裏我試圖在URL中傳遞3個參數:["2016.05", "mike"]
我創建相應的路由器配置:如果參數值包含點(點),Angular2路由器無法正常工作

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

該路由器可以讓我通過調用像訪問從我的程序該網址:

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

之後,我能找回我的參數裏面有DataDetails組件。

只要我嘗試直接從瀏覽器訪問此鏈接(不首先訪問主頁),就會出現問題。只需轉到網址:http://localhost/data/2016.05/mike。當我從2016.05刪除點.

Cannot GET /data/2016.05/mike 

正常工作: 我收到一個錯誤。

有沒有問題,爲什麼我不能使用.作爲路由器參數值?

回答

1

我不知道是否有一個特定的原因,不允許.,但我想它只是不想添加到允許的字符列表。

/=最近https://github.com/angular/angular/pull/7312加入到被允許作爲參數值的一部分,而不是作爲分隔符。

值得創建一個錯誤報告。

+1

謝謝。我已經爲Angular 2打開了相應的問題:https://github.com/angular/angular/issues/8249。讓我們看看官方的迴應。 – WhiteAngel

1

點是不允許的,因爲當你想爲一個文件,例如yourserver它用於:8080/mypic.png

0

***不覆蓋,只需要使用URLSearchParams

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

    這類接受的$ {@鏈路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()); 
0

您使用的WebPack。在webpack中,我們可以通過在webpack dev服務器配置文件中做一些小改動來使其工作。

historyApiFallback: { 
     disableDotRule: true 
    },