W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
路由器使用瀏覽器的 history.pushState API
進(jìn)行導(dǎo)航。借助 pushState
你自定義應(yīng)用中的 URL
路徑 "localhost:4200/crisis-center",應(yīng)用內(nèi)的 URL
和服務(wù)器的 URL
沒有區(qū)別。
現(xiàn)代的 HTML5 瀏覽器都支持 pushState
,這也就是為什么很多人把這種 URL
形式稱為 "HTML 5" 風(fēng)格的 URL。
路由器默認(rèn)使用 HTML5 風(fēng)格的導(dǎo)航。 在
LocationStrategy
與瀏覽器URL
風(fēng)格部分,你可以了解為何推薦使用 HTML5 風(fēng)格的 URL,如何調(diào)整其行為,以及必要時(shí)如何切換到老式的 hash(#)風(fēng)格。
你必須在應(yīng)用的 "index.html" 中添加一個(gè) <base href>
元素才能讓 pushState
路由正常工作。 瀏覽器要用 <base href>
的值為引用 CSS、腳本和圖片文件時(shí)使用的相對(duì) URL
添加前綴。
請(qǐng)把 <base>
元素添加在 <head>
標(biāo)簽的緊后面。如果應(yīng)用的根目錄是 "app" 目錄,那么就可以像這個(gè)應(yīng)用程序一樣,設(shè)置 "index.html" 中的 href
值。代碼如下。
Path:"src/index.html (base-href)" 。
<base href="/">
由于路由器默認(rèn)使用 “HTML 5 pushState” 風(fēng)格,所以你必須用一個(gè) <base href>
來配置該策略(Strategy)。
配置該策略的首選方式是往 "index.html" 的 <head>
中添加一個(gè) <base href>
element標(biāo)簽。
Path:"src/index.html (base-href)" 。
<base href="/">
如果沒有該標(biāo)記,瀏覽器就可能無法在“深度鏈接”進(jìn)入應(yīng)用時(shí)加載資源(圖片,CSS,腳本)。
有些開發(fā)人員可能無法添加 <base>
元素,這可能是因?yàn)樗鼈儧]有訪問 <head>
或 "index.html" 的權(quán)限。
它們?nèi)匀豢梢允褂?HTML 5 格式的 URL
,但要采取如下步驟進(jìn)行補(bǔ)救:
用適當(dāng)?shù)腫APP_BASE_HREF][]值提供(provide)路由器。
對(duì)所有 Web 資源使用絕對(duì)地址:CSS、圖片、腳本、模板 HTML。
你可以在根模塊的 RouterModule.forRoot()
的第二個(gè)參數(shù)中傳入一個(gè)帶有 useHash: true
的對(duì)象,以回到基于 HashLocationStrategy
的傳統(tǒng)方式。
Path:"src/app/app.module.ts (hash URL strategy)" 。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
],
declarations: [
AppComponent,
PageNotFoundComponent
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: