我正在使用Angular 6,我希望我的应用程序具有静态基本URL,以便进行反向代理配置。

在我的index.html中,我设置了基本网址

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>APM</title>
  <base href="/my-base">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <pm-root></pm-root>
</body>
</html>

在我的app.module.ts中,我配置了路由表
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: "welcome", component: WelcomeComponent },
      { path: "", redirectTo: "welcome", pathMatch: "full" },
      { path: "**", redirectTo: "welcome", pathMatch: "full" }
    ], { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

启动应用程序后,我发现URL为http://localhost:4200/my-base#/welcome,在my-base后有一个#。

如果我将路由中的代码更改为useHash: false,则#在我的基本URL之后,成为http://localhost:4200/my-base/welcome#/welcome
我找不到大量信息useHash: false的确切含义是什么,结果是什么?

最佳答案

简单总结
主要区别在于Server是否易于实现重定向机制useHash: trueuseHash: false易于实现

原则
设置useHash: false时,它使用的是 PathLocationStrategy ,它是需要服务器支持的HTML5 pushstate
当您输入要浏览的网址时

localhost:4200/my-base/welcome/
服务器需要将 localhost:4200/my-base/welcome/重定向到您的index.html
useHash: true,它使用的是 HashLocationStrategy
您需要在base-href('my-base')之后添加#,URL为
localhost:4200/my-base/#/welcome/
服务器直接向您的index.html发送 localhost:4200/my-base/的请求,这很容易在服务器端实现。

引用
Angular如何使用PathLocationStrategy(useHash:false)与服务器端(IIS,Nginx)一起使用
  • Deploy an Angular Application to IIS
  • Nginx and Angular URL routing
  • 10-08 04:39