So entfernen Sie das #-Zeichen aus der URL in Angular2 (ausführliches Tutorial)

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Entfernen des #-Zeichens in der URL in Angular 2+ ein. Der Artikel stellt zunächst die Gründe und Methoden zum Entfernen des #-Zeichens im Detail vor und demonstriert sie anschließend Sie durch Beispielcode. Für die Entfernungsmethode können Freunde, die es benötigen, auf

Vorwort

Dieser Artikel führt hauptsächlich die Entfernung von ein # Geben Sie die URL in Angular2+ ein. Dies ist ein Problem, auf das ich kürzlich bei der Arbeit gestoßen bin. Ich halte es für notwendig, es mit allen zu teilen. Schauen wir uns die detaillierte Einführung an.

1. Warum sollte es entfernt werden?

• Angular weist darauf hin: Wenn es nicht genügend Gründe gibt, den Hash-Stil (#) zu verwenden, versuchen Sie, den HTML5-Modus-Routing-Stil zu verwenden;

• Wenn der Hash-Stil konfiguriert ist, treten im Deep Path von WeChat oder Angular immer noch Probleme auf.

• Wenn Sie Tools wie verwenden müssen als GA, da Sie die URL nicht nach # abrufen können, wird bei jedem Routenwechsel ein Pfad dorthin gesendet.

• '#' ist etwas 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

index.html head Riga

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

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 = [
 {
 ...
 }
];

If Sie konfigurieren nur das Frontend. Was wird passieren?

Wenn Sie nur das Frontend konfigurieren, wird das „#“ entfernt, aber sobald Sie die Seite aktualisieren, erhalten Sie eine 404, was auf einen Fehler in der Pfadanalyse hinweist.

Angular ist eine Single-Page-Anwendung, die die Front-End-Routing-Funktion implementiert. Das Back-End kann Routing-Sprünge nicht mehr steuern und wirft die gesamte Geschäftslogik, die ursprünglich zum Back-End gehörte, an das Front-End.

• 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 hat Auf der entsprechenden Seite wird der Fehler 404 angezeigt.

• Wenn der Benutzer zuerst die Homepage (http://gitee.poetry) besucht und dann zur Seite (http://gitee.poetry/life) springt, dann springt dieser ist eine vom Angular-Frontend verwaltete URL und der Zugriff ist normal.

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

Denken Sie: Warum ist der Hash-Modus nicht 404?

2.2 ngx-Konfiguration

Mit '***' müssen Sie 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:

Wenn die Anfrage https://deepthan.gitee.io/poetry/life lautet, ist $uri „/life“. Wenn „$uri“$uri/“ nicht gefunden werden kann, wird zurückgegriffen . Gehen Sie zur letzten Option von try_files/index.html, um eine interne „Unteranfrage“ zu initiieren, was dem Initiieren einer HTTP-Anfrage von Nginx an https://deepthan.gitee.io/poetry/index.html entspricht. Diese Anfrage wird von location ~ .php$ { ... } Catch abgefangen, das heißt, sie gelangt in den FastCGI-Handler. Der spezifische URI und die Parameter werden in REQUEST_URI an FastCGI- und WordPress-Programme übergeben, sodass sie von URI-Änderungen nicht betroffen sind.

2.3 Apache

Erstellen Sie eine .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 Pages + 404-Seite

Für Github-Seiten oder Code Cloud-Seiten können wir Github-Seiten nicht direkt konfigurieren, aber wir können beim Commit 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 in 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: Der Single-Page-App-Hack für GitHub-Seiten

3. Mit „#“ und ohne „#“ Was ist das? Unterschied im Prinzip?

3.1 Lassen Sie uns zunächst darüber sprechen, was Front-End-Routing ist:

Früher wurde das Routing im Hintergrund durchgeführt und Sie navigierten Für bestimmte HTML-Seiten können wir jetzt Angular, Vue, React usw. am Front-End verwenden, um die Front-End-Steuerungsroutensprungfunktion über Konfigurationsdateien zu erreichen.

Implementierungsmethode des Front-End-Routings:

• Implementiert durch Hashing. Wenn sich der Hash der URL ändert, wird der bei der Hashänderung registrierte Rückruf ausgelöst (bei niedrigeren Versionen ist dies nicht der Fall). Hashchange-Ereignisse, durch Reinkarnationserkennungs-URL-Implementierung), führen unterschiedliche Vorgänge aus und zeigen unterschiedliche Inhalte im Rückruf an.

  Wenn zur Implementierung ein Hash verwendet wird, muss # in die URI-Regeln aufgenommen werden. Der Inhalt nach # in der Route ist streng genommen der Ankerpunkt, auf den wir uns oft beziehen Seite.
  

• Die Verlaufs-API von HTML5 steuert die Implementierung des Sitzungsverlaufs des Browsers

  Basierend auf der Historie ohne # implementierte Routen sind die ursprünglichen Routen
  

3.2 Routing-Strategie in 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地址，用前端路由做单页面网页就很好的解决了这个问题。

缺点：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用JavaScript如何实现抽奖系统

详细解答vue的变化对组件有什么影响？

使用Parcel如何打包

Das obige ist der detaillierte Inhalt vonSo entfernen Sie das #-Zeichen aus der URL in Angular2 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!