角静态基本UR1和useHash = True的路由 [英] Angular static Base URl and routing with useHash=True
问题描述
我正在使用Angular 6,我希望我的应用程序具有静态基本URL,以便进行反向代理配置.
在我的 index.html
中设置基本网址
<!doctype html>< html lang ="zh-CN">< 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><身体>< pm-root></pm-root></body></html>
在我的 app.module.ts
中,我配置了路由表
从'@ angular/platform-browser'导入{BrowserModule};从"@ angular/forms"导入{FormsModule};从'@ angular/common/http'导入{HttpClientModule};从'@ angular/core'导入{NgModule};从'@ angular/router'导入{RouterModule};从'./app.component'导入{AppComponent};从'./home/welcome.component'导入{WelcomeComponent};@NgModule({声明:[AppComponent,WelcomeComponent],进口:[BrowserModule,FormsModule,HttpClientModule,RouterModule.forRoot([{路径:"welcome",组件:WelcomeComponent},{path:",redirectTo:"welcome",pathMatch:"full"},{path:"**",redirectTo:"welcome",pathMatch:"full"}],{useHash:true})],引导程序:[AppComponent]})导出类AppModule {}
启动应用程序后,我发现URL为 http://localhost:4200/my-base#/welcome
,在 my-base
之后有一个#
如果我将路由中的代码更改为具有 useHash:false
,则#在我的基本URL之后,并变为 http://localhost:4200/my-base/welcome#/欢迎
我找不到大量信息,确切说明 useHash:false
的含义是什么,
简单摘要
主要区别在于Server是否易于实现重定向机制
与 useHash:false
相比, useHash:true
易于实现
原理
设置 useHash:false
时,它使用的是 PathLocationStrategy ,它是使用需要服务器支持的 HTML5推送状态
输入浏览器网址
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)一起使用
I am using Angular 6, I want my app to have a static base URL for the purpose of reverse proxy configuration.
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>
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 { }
After I launch the application I noticed the URL is http://localhost:4200/my-base#/welcome
, there is a # after my-base
.
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
I could not find lots of information what exact the meaning of useHash: false
, what is the consequence?
Simple summary
The main difference is whether Server is easy to implement the redirect mechanism
useHash: true
is easy to implement than useHash: false
Principle
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/
The server needs to redirect localhost:4200/my-base/welcome/ to your index.html
useHash: true
, it's using HashLocationStrategy
you need to add #
after your base-href('my-base'), the URL is
localhost:4200/my-base/#/welcome/
The server directly makes a request to localhost:4200/my-base/ to your index.html, It's easy to implement in server side.
Reference
Angular How to work with Server Side(IIS, Nginx) using PathLocationStrategy(useHash: false)
这篇关于角静态基本UR1和useHash = True的路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!