为什么 angular 路由将标签 # 添加到 url

Question

使用的版本

Angular 版本：7.10 @angular/router": "~7.2.0",

问题是

为什么 angular 将 hashTag 添加到 url。

示例：

const routes: Routes = [
  {
    path: 'aktion',
    component: AktionComponent
  }

确实匹配 url

http://localhost:4200/aktion

但不匹配 url

http://localhost:4200/#/aktion

Answer 1

如果您已将此行添加到应用程序模块，那么它会添加 #

   RouterModule.forRoot(AppRoutes, { useHash: true }),

Answer 2

在应用模块中，这样做

@NgModule({
  imports: [
  // other imports
    RouterModule.forRoot(routes, { useHash: true }) //make it false
  ],
  declarations: [
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 3

如果您使用的是 PathLocationStrategy，则服务器应配置为发送 error page 也作为 index.html，因为通常这会导致 404 和 Angular 应该解析路由。

为了避免麻烦，可以使用 HashLocationStrategy，因为# 之后的任何部分都会被服务器忽略，并且只会从浏览器中解析。因此你有#。要删除它，您可以更新 RouterModule configuration，如其他答案所示。

RouterModule.forRoot(AppRoutes, { useHash: false }),

为什么 angular 路由将标签 # 添加到 url

Why angular routing adds hashtag # to the url

angular-routing

angular