Angular static Base URl 和使用 useHash=True 的路由
Angular static Base URl and routing with useHash=True
我正在使用 Angular 6,我希望我的应用程序有一个静态基础 URL 用于反向代理配置。
在我的 index.html
中,我设置了基数 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
中,我配置了路由table
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: true
比useHash: false
更容易实现
原理
当你设置useHash: false
时,它使用PathLocationStrategy,它使用HTML5 pushstate
需要服务器支持
当你进入Url浏览器
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)
我正在使用 Angular 6,我希望我的应用程序有一个静态基础 URL 用于反向代理配置。
在我的 index.html
中,我设置了基数 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
中,我配置了路由table
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: true
比useHash: false
原理
当你设置useHash: false
时,它使用PathLocationStrategy,它使用HTML5 pushstate
需要服务器支持
当你进入Url浏览器
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)