我們使用angular的腳手架安裝的項目會提示我們是否需要安裝路由，我們通常都會選擇同意安裝，目前，angular默認的路由策略是不帶#的history模式策略。

官網中是這么說的：

路由器通過兩種 LocationStrategy 提供者來支持所有這些風格：

1. PathLocationStrategy - 默認的策略，支持“HTML 5 pushState”風格。（也就是所謂的history模式）
2. HashLocationStrategy - 支持“hash URL”風格。

RouterModule.forRoot() 函數把 LocationStrategy 設置成了 PathLocationStrategy，使其成為了默認策略。 你還可以在啟動過程中改寫（override）它，來切換到 HashLocationStrategy 風格。

但是history模式雖然漂亮，像是原生的url路由方式。但是這種模式也有缺點：

• 可能兼容性不太好，如果要兼容比較老版本的瀏覽器的話，可能不太行。
• 這個模式需要后臺配合進行設置，如果我們直接訪問這種路由，可能就直接報404的錯誤了。這個時候我們需要后臺人員的配合才可以。方法是：在服務端增加一個覆蓋所有情況的候選資源：如果url匹配不到任何的靜態資源，則應該返回同一個index.html頁面，這個頁面就是你的應用所依賴的頁面。詳細的配置，我在angular官網中沒有找到，倒是在vue官網中有說明，詳情請見：HTML5 History 模式。

如果我們的后端小哥哥水平不行或者因為別的亂七八糟的原因，導致無法后端進行適配，就需要我們將默認的history模式改成hash模式才行。

其實改的方式很簡單，我們打開/src/app/app.module.ts這個項目的入口，然后修改一下其providers，代碼如下：

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [ //省略 ],
  imports: [ //省略 ],
  //將默認的PathLocationStrategy，改成HashLocationStrategy。
  providers: [{
    provide:LocationStrategy,
    useClass:HashLocationStrategy,
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后我們刷新一下頁面，就可以了。