我們使用angular的腳手架安裝的項目會提示我們是否需要安裝路由,我們通常都會選擇同意安裝,目前勤揩,angular默認的路由策略是不帶#
的history模式策略俗批。
官網中是這么說的:
路由器通過兩種
LocationStrategy
提供者來支持所有這些風格:
PathLocationStrategy
- 默認的策略俗或,支持“HTML 5 pushState”風格。(也就是所謂的history模式)HashLocationStrategy
- 支持“hash URL”風格岁忘。
RouterModule.forRoot()
函數把LocationStrategy
設置成了PathLocationStrategy
辛慰,使其成為了默認策略。 你還可以在啟動過程中改寫(override)它干像,來切換到HashLocationStrategy
風格昆雀。
但是history模式雖然漂亮,像是原生的url路由方式蝠筑。但是這種模式也有缺點:
- 可能兼容性不太好,如果要兼容比較老版本的瀏覽器的話揩懒,可能不太行什乙。
- 這個模式需要后臺配合進行設置,如果我們直接訪問這種路由已球,可能就直接報
404
的錯誤了臣镣。這個時候我們需要后臺人員的配合才可以。方法是:在服務端增加一個覆蓋所有情況的候選資源:如果url匹配不到任何的靜態(tài)資源智亮,則應該返回同一個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 { }
然后我們刷新一下頁面朋截,就可以了蛹稍。