Ausführliche Erklärung zum Entfernen des #-Zeichens aus der URL in Angular2

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie die #-Nummer aus der URL in Angular2 entfernen. Was sind die Vorsichtsmaßnahmen zum Entfernen der #-Nummer aus der URL in Angular2? Ein praktischer Fall.

Vorwort

In diesem Artikel wird hauptsächlich der relevante Inhalt zum Entfernen des #-Zeichens in der URL in Angular2+ vorgestellt. Dies ist ein Problem, auf das ich kürzlich bei der Arbeit gestoßen bin. Ich werde im Folgenden nicht viel darüber sagen Schauen wir uns die Details an.

1. Warum sollte es entfernt werden?

• Der Beamte von Angular weist darauf hin: Wenn es keinen ausreichenden Grund gibt, den Hash-Stil (#) zu verwenden, versuchen Sie, den Routing-Stil im HTML5-Modus zu verwenden.

• Wenn der Hash-Stil konfiguriert ist, verwenden Sie den tiefen Pfad in WeChat Payment oder Angular wird immer noch ein 404-Problem auftreten.

• Wenn Sie Tools wie GA verwenden müssen, weil Sie die URL nach der #-Nummer nicht erhalten können, wird ein Pfad dorthin gesendet jedes Mal, wenn die Route gewechselt wird;

• '#' ist ein bisschen hässlich.

2. Wie entferne ich es?

Es gibt vier Methoden:

• Frontend + ngx

• Frontend + Apache

• Frontend + Tomcat

• GithubPages / Code Cloud Pages + 404 Seiten

2.1 Frontend

Fügen Sie

<base href="/" rel="external nofollow" >

zum Kopf von index.html hinzu app.module.ts

import { ROUTER_CONFIG } from './app.routes.ts';
@NgModule({
 imports: [
 ...
 RouterModule.forRoot(ROUTER_CONFIG) 
 // RouterModule.forRoot(ROUTER_CONFIG, { useHash: true } ) 这样写是带#的
 ], 
})

app.routes.ts:

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
export const ROUTER_CONFIG: Routes = [
 {
 ...
 }
];

Was passiert, wenn Sie nur das Frontend konfigurieren?

Wenn Sie nur das Frontend konfigurieren, wird das „#“ entfernt, aber sobald die Seite aktualisiert wird, wird 404 angezeigt, was auf einen Fehler in der Pfadauflösung hinweist.
Angular ist eine Single-Page-Anwendung. Sie implementiert die Front-End-Routing-Funktion. Das Backend kann keine Routing-Sprünge mehr steuern und die gesamte Geschäftslogik, die ursprünglich zum Backend gehörte, an das Frontend übergeben.

• Wenn der Benutzer die Seite (http://gitee.poetry/life) aktualisiert, wird die Anfrage zunächst an den WebServer-Hintergrund gesendet. Wenn die Hintergrundroute keine Routing-Verwaltung für die entsprechende Seite hat, tritt ein 404-Fehler auf.

• Wenn der Benutzer zuerst die Homepage (http://gitee.poetry) besucht und dann zur Seite (http://gitee.poetry/life) springt, dann wird dieser Sprung von Angular durchgeführt Der Zugriff auf die von der Rezeption verwaltete URL ist normal.

Dann können wir das 404-Problem lösen, indem wir WebServer bitten, alle von Angular verwalteten Routing-URLs an index.html weiterzuleiten, die später eingeführten Konfigurationsinformationen.

Denken: Warum ist der Hash-Modus nicht 404?

2.2 NGX-Konfiguration

Diejenigen mit „***“ müssen den Inhalt der nginx.conf-Datei selbst konfigurieren

server {
 listen 80; #监听的端口号 
 server_name my_server_name; # 服务器名称 ***
 root /projects/angular/myproject/dist; #相对于nginx的位置 ***
 index index.html; #如果index.html存在，就结束查找过程，把这个文件附加到请求的request_uri后面，并且发起一个内部的redirect。
 location / { # / 是匹配所有的uri后执行下面操作
 try_files $uri $uri/ /index.html; #try_files先寻找名为 $uri 文件，没有则寻找 $uri/ 文件，再没有就寻找/index.html
 }
}

try_files detaillierte Erklärung:

Die Anfrage lautet beispielsweise https://deepthan.gitee.io/poetry/life, $uri ist „/life“. Wenn weder „$uri“ noch „$uri/“ gefunden wird, wird auf die letzte Option von try_files zurückgegriffen. /index.html initiiert eine interne „Unteranfrage“, die dem Initiieren eines HTTP durch Nginx entspricht Anfrage an https://deepthan.gitee.io/poetry/index.html. Diese Anfrage wird nach Standort gesendet ~ .php$ { ... } Catch, das heißt, geben Sie den FastCGI-Handler ein. Der spezifische URI und die Parameter werden an REQUEST_URI übergeben FastCGI- und WordPress-Programme sind daher von URI-Änderungen nicht betroffen.

2.3 Apache

Erstellen Sie eine neue .htaccess-Datei im Stammverzeichnis von Apache

RewriteEngine On 
# 如果请求的是现有资源，则按原样执行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule ^ - [L]
# 如果请求的资源不存在，则使用index.html
RewriteRule ^ /index.html

2.4 Tomcat-Konfiguration

Tomcat/conf/web.xml文件上添加
<error-page>
 <error-code>404</error-code>
 <location>/</location>
</error-page>

2,5 GithubPages / Code Cloud-Seiten + 404 Seiten

Für Github-Seiten oder Code-Cloud-Seiten können wir Github-Seiten nicht direkt konfigurieren, aber wir können beim Festschreiben eine 404-Seite hinzufügen. Die einfache Lösung lautet wie folgt:

Wir erstellen eine neue 404.html im Stammverzeichnis des Projekts und kopieren den Inhalt von index.html vollständig nach 404.html. Wenn Sie dies tun, geben Github-Seiten immer noch zum richtigen Zeitpunkt eine 404-Antwort aus, und der Browser verarbeitet die Seite korrekt und lädt unsere Anwendung normal.

Über diesen Hack: S(GH)PA: The Single-Page App Hack for GitHub Pages

3. Was ist der prinzipielle Unterschied zwischen der Verwendung von „#“ und ohne „#“?

3.1  这个得先说下什么是前端路由：

以前路由都是后台做的，通过用户请求的url导航到具体的html页面，现在我们在前端可以利用 Angular、vue、react等通过配置文件，达到前端控制路由跳转的功能。

前端路由的实现方法：

• 通过hash实现 当url的hash发生改变时，触发hashchange注册的回调（低版本没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。
  使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，我们常说的锚点严格来说应该是页面中的a[name]等元素。

• HTML5的history api操作浏览器的session history实现
  基于history实现的路由中不带#，就是原始的路由

3.2 Angular中的路由策略

angular2提供的路由策略也是基于上面两个原理实现的，可以在@NgModule中通过providers配置或RouterModule.forRoot()配置：

1） 路由中有#

@NgModule({
 imports:[RouterModule.forRoot(routes,{useHash:true})]
})

或

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
 ]
})

HashLocationStragegy

适用于基于锚点标记的路径，比如/#/**，后端只需要配置一个根路由即可。

2） html5路由（无#）

改用 PathLocationStrategy（angular2的默认策略，也就是HTML5路由），使用这个路由的常规路径不带#，这种策略需要后台配置支持，因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器从一个路由跳往另外一个路由或者刷新时就会返回404，需要在服务端里面覆盖所有的路由情况（后端可以通过nginx或者apache等配置）。

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
 {provide: LocationStrategy, useClass: PathLocationStrategy} 
 // 这一行是可选的，因为默认的LocationStrategy是PathLocationStrategy
 ]
})

更改index.html中的base href属性，Angular将通过这个属性来处理路由跳转

<base href="/app/" rel="external nofollow" rel="external nofollow" >

在后端的服务器上，用下面的正则去匹配所有的页面请求导向index.html页面。

we must render the index.html file for any request coming with below pattern

index.html

 
 
 <base href="/app/" rel="external nofollow" rel="external nofollow" >
 
 Loading...
 
 
 

3.3 前端路由优缺点

优点：

1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由做单页面网页就很好的解决了这个问题。

缺点：

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Entfernen des #-Zeichens aus der URL in Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!