Angular9 <base href>

2020-07-08 13:45 更新

路由器使用瀏覽器的 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="/">

HTML5 網(wǎng)址和 <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。

HashLocationStrategy

你可以在根模塊的 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 { }
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)