Angular 静态 Base URl 和使用 useHash=True 的路由 [英] Angular static Base URl and routing with useHash=True
问题描述
我使用的是 Angular 6，我希望我的应用有一个静态基 URL，用于反向代理配置.
I am using Angular 6, I want my app to have a static base URL for the purpose of reverse proxy configuration.
在我的 index.html 中，我设置了 base Url
In my index.html I set base Url
<!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 中，我配置了路由表
In my app.module.ts I have the routing table configured
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 后面有一个 #.
After I launch the application I noticed the URL is http://localhost:4200/my-base#/welcome, there is a # after my-base.
如果我将路由中的代码更改为具有 useHash: false 则 # 在我的基本 URL 之后变为 http://localhost:4200/my-base/welcome#/欢迎
If I change the code in routing to have useHash: false then the # is after my base URL and becomes http://localhost:4200/my-base/welcome#/welcome
我找不到很多信息 useHash: false 的确切含义是什么，后果是什么?
I could not find lots of information what exact the meaning of useHash: false, what is the consequence?
推荐答案
简单总结
主要区别在于Server是否容易实现重定向机制
Simple summary
The main difference is whether Server is easy to implement the redirect mechanism
useHash: true 比 useHash: false
当你设置useHash: false时，它使用的是PathLocationStrategy，它使用的是需要服务器支持的HTML5 pushstate
when you set useHash: false, it's using PathLocationStrategy, It's using HTML5 pushstate that requires server support
当您输入浏览器的网址时
When you enter the Url to Browser
localhost:4200/my-base/welcome/
服务器需要将 localhost:4200/my-base/welcome/ 重定向到您的 index.html
The server needs to redirect localhost:4200/my-base/welcome/ to your index.html
useHash: true，它使用HashLocationStrategy
你需要在你的base-href('my-base')后面加上#，网址是
you need to add # after your base-href('my-base'), the URL is
localhost:4200/my-base/#/welcome/
服务器直接向你的index.html发出localhost:4200/my-base/的请求，在服务器端很容易实现.
The server directly makes a request to localhost:4200/my-base/ to your index.html, It's easy to implement in server side.
参考
Angular 如何使用 PathLocationStrategy(useHash: false) 与服务器端(IIS、Nginx)一起工作
Angular How to work with Server Side(IIS, Nginx) using PathLocationStrategy(useHash: false)
这篇关于Angular 静态 Base URl 和使用 useHash=True 的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
