Explication détaillée de la façon de supprimer le signe # de l'URL dans Angular2-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée de l'opération de suppression du numéro # de l'URL dans Angular2. Quelles sont les précautions pour supprimer le numéro # de l'URL dans Angular2. un cas pratique. Jetons un coup d'oeil.

Avant-propos

Cet article présente principalement le contenu pertinent sur la suppression du signe # dans l'URL dans Angular2+. C'est un problème que j'ai rencontré récemment au travail. Je pense qu'il est nécessaire de le partager avec vous. Je n'en dirai pas grand-chose ci-dessous. regardons les détails.

1. Pourquoi devrait-il être supprimé ?

Le responsable d'Angular souligne : s'il n'y a pas de raison suffisante pour utiliser le style de hachage (#), essayez d'utiliser le style de routage en mode HTML5
Si le style de hachage est configuré, le chemin profond dans le paiement WeChat ou Angular ; sera toujours Il y aura un problème 404
Lorsque vous devrez utiliser des outils tels que GA, parce que vous ne pouvez pas obtenir l'URL après le numéro #, un chemin lui sera envoyé à chaque fois que l'itinéraire est changé,
'#' est un peu moche.

2. Comment le supprimer ?

Il existe quatre méthodes :

Frontend + ngx
Frontend + Apache
Frontend + Tomcat
GithubPages / Code Cloud Pages + 404 pages

2.1 Front-end

Ajoutez

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

Copier après la connexion

en tête de index.html app.module.ts

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

Copier après la connexion

app.routes.ts :

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

Copier après la connexion

Que se passe-t-il si vous configurez uniquement le front-end ?

Si vous configurez uniquement le front-end, le '#' sera supprimé, mais dès que la page sera actualisée, 404 apparaîtra, indiquant une erreur dans la résolution du chemin.
Angular est une application d'une seule page. Elle implémente la fonction de routage du front-end. Le backend ne peut plus contrôler les sauts de routage et lancer toute la logique métier appartenant à l'origine au backend vers le frontend.

Lorsque l'utilisateur actualise la page (http://gitee.poetry/life), la requête est d'abord soumise en arrière-plan du serveur Web. Si la route en arrière-plan n'a pas de gestion de routage pour la page correspondante, une erreur 404 se produira.
Si l'utilisateur visite d'abord la page d'accueil (http://gitee.poetry) puis accède à la page (http://gitee.poetry/life), alors ce saut est effectué par Angular L'accès à l'URL gérée par la réception est normal.

Nous pouvons ensuite résoudre le problème 404 en demandant à WebServer de transmettre toutes les URL de routage gérées par Angular vers index.html, qui sont les informations de configuration introduites plus tard.

Réflexion : Pourquoi le mode de hachage n'est-il pas 404 ?

Configuration 2.2 ngx

Ceux avec '***' doivent configurer vous-même le contenu du fichier nginx.conf

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
 }
}

Copier après la connexion

Explication détaillée de try_files :

Par exemple, la requête est https://deepthan.gitee.io/poetry/life, $uri est '/life'. Si ni '$uri' ni $uri/' ne sont trouvés, il reviendra à la dernière option de try_files. /index.html lance une « sous-requête » interne, ce qui équivaut à nginx lançant un HTTP Demande à https://deepthan.gitee.io/poetry/index.html. Cette demande sera envoyée par emplacement ~ .php$ { ... } catch, c'est-à-dire entrez le gestionnaire FastCGI. L'URI et les paramètres spécifiques sont transmis au REQUEST_URI Les programmes FastCGI et WordPress ne sont donc pas affectés par les modifications d'URI.

Apache 2.3

Créez un nouveau fichier .htaccess dans le répertoire racine d'Apache

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

Copier après la connexion

2.4 Configuration Tomcat

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

Copier après la connexion

2.5 Pages Github / Pages Nuage de Code + 404 Pages

Pour les pages Github ou les pages de nuage de codes, nous ne pouvons pas configurer directement les pages Github, mais nous pouvons ajouter une page 404 lors de la validation. La solution simple est la suivante :

Nous créons un nouveau 404.html dans le répertoire racine du projet et copions complètement le contenu de index.html dans 404.html. Faire cela, les pages github donneront toujours une réponse 404 au moment approprié, et le navigateur gérera la page correctement et chargera notre application normalement.

À propos de ce hack : S(GH)PA : le hack d'application à page unique pour les pages GitHub

3. Quelle est la différence de principe entre utiliser « # » et sans « # » ?

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})]
})

Copier après la connexion

或

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

Copier après la connexion

HashLocationStragegy

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

2） html5路由（无#）

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

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

index.html




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

Copier après la connexion

3.3 前端路由优缺点

优点：

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

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

缺点：

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

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