Angular9 <base href>

路由器使用浏览器的 history.pushState API 进行导航。借助 pushState 你自定义应用中的 URL 路径 "localhost:4200/crisis-center"，应用内的 URL 和服务器的 URL 没有区别。

现代的 HTML5 浏览器都支持 pushState，这也就是为什么很多人把这种 URL 形式称为 "HTML 5" 风格的 URL。

路由器默认使用 HTML5 风格的导航。在 LocationStrategy 与浏览器 URL 风格部分，你可以了解为何推荐使用 HTML5 风格的 URL，如何调整其行为，以及必要时如何切换到老式的 hash（#）风格。

你必须在应用的 "index.html" 中添加一个 <base href> 元素才能让 pushState 路由正常工作。浏览器要用 <base href> 的值为引用 CSS、脚本和图片文件时使用的相对 URL 添加前缀。

请把 <base> 元素添加在 <head> 标签的紧后面。如果应用的根目录是 "app" 目录，那么就可以像这个应用程序一样，设置 "index.html" 中的 href 值。代码如下。

Path："src/index.html (base-href)" 。

<base href="/">

HTML5 网址和 <base href>

由于路由器默认使用 “HTML 5 pushState” 风格，所以你必须用一个 <base href> 来配置该策略（Strategy）。

配置该策略的首选方式是往 "index.html" 的 <head> 中添加一个 <base href> element标签。

Path："src/index.html (base-href)" 。

<base href="/">

如果没有该标记，浏览器就可能无法在“深度链接”进入应用时加载资源（图片，CSS，脚本）。

有些开发人员可能无法添加 <base> 元素，这可能是因为它们没有访问 <head> 或 "index.html" 的权限。

它们仍然可以使用 HTML 5 格式的 URL，但要采取如下步骤进行补救：

用适当的[APP_BASE_HREF][]值提供（provide）路由器。

对所有 Web 资源使用绝对地址：CSS、图片、脚本、模板 HTML。

HashLocationStrategy

你可以在根模块的 RouterModule.forRoot() 的第二个参数中传入一个带有 useHash: true 的对象，以回到基于 HashLocationStrategy 的传统方式。

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 { }