Comment supprimer le signe # de l'url dans Angular2 (tutoriel détaillé)

Cet article vous présente principalement les informations pertinentes sur la façon de supprimer le signe # dans l'URL dans Angular 2+. L'article présente et analyse d'abord les raisons et les méthodes de suppression du signe # en détail, puis le démontre. vous via un exemple de code. Pour la méthode de suppression, les amis qui en ont besoin peuvent se référer à

Avant-propos

Cet article présente principalement la suppression du # connectez-vous à l'URL dans Angular2+ Content, c'est un problème que j'ai rencontré au travail récemment. Je pense qu'il est nécessaire de le partager avec tout le monde, je ne dirai pas grand-chose ci-dessous, jetons un œil à l'introduction détaillée.

1. Pourquoi devrait-il être supprimé ?

• Le responsable d'Angular souligne : s'il n'y a pas suffisamment de raisons d'utiliser le style de hachage (#), essayez d'utiliser le style de routage en mode HTML5

   ;

• Si le style de hachage est configuré, des problèmes 404 se produiront toujours dans le chemin profond du paiement WeChat ou Angular

• Lorsque vous devrez utiliser des outils tels que en tant que GA, parce que vous ne pouvez pas obtenir l'URL après #, un chemin lui sera envoyé à chaque changement d'itinéraire

• '#' est un peu moche ;

2. Comment le supprimer ?

Il existe quatre méthodes :

• Frontend + ngx

• Frontend + Apache

• Front-end + Tomcat

• GithubPages / Code Cloud Pages + 404 pages

2.1 Front-end

index.html tête 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 = [
 {
 ...
 }
];

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 vous actualiserez la page, vous obtiendrez un 404, indiquant une erreur dans l'analyse du chemin.
Angular est une application d'une seule page qui implémente la fonction de routage front-end. Le back-end ne peut plus contrôler les sauts de routage et renvoie toute la logique métier appartenant à l'origine au back-end vers le front-end.

• 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, l'erreur 404 apparaîtra.

• 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 une URL gérée par le frontend Angular, et l'accès est normal.

Ensuite, nous pouvons résoudre le problème 404 en laissant WebServer 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 ngx 2.2

Avec '***', vous devez 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
 }
}

try_files détaillé explication :

Si la requête est https://deepthan.gitee.io/poetry/life, $uri est '/life'. Si '$uri''$uri/' ne peut pas être trouvé, il le sera. Revenez à la dernière option de try_files/index.html pour lancer une "sous-requête" interne, ce qui équivaut à nginx lançant une requête HTTP à https://deepthan.gitee.io/poetry/index.html. Cette requête sera interceptée par location ~ .php$ { ... } catch, c'est-à-dire qu'elle entrera dans le gestionnaire FastCGI. L'URI et les paramètres spécifiques sont transmis aux programmes FastCGI et WordPress dans REQUEST_URI, ils ne sont donc pas affectés par les modifications d'URI.

2.3 Apache

Créer un 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

2.4 Configuration Tomcat

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

2.5 GithubPages / Code Cloud Pages + page 404

Pour les pages github ou Code Cloud Pages, nous ne pouvons pas configurer directement les pages Github, mais nous pouvons le faire quand committing Ajouter une page 404. 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 vers 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

Avec '#' et sans '#' Qu'est-ce que c'est. différence de principe ?

3.1 Parlons d'abord de ce qu'est le routage front-end :

Dans le passé, le routage était effectué en arrière-plan et vous naviguiez à l'URL demandée par l'utilisateur. Pour des pages HTML spécifiques, nous pouvons désormais utiliser Angular, vue, réagir, etc. sur le front-end pour réaliser la fonction de saut d'itinéraire de contrôle frontal via les fichiers de configuration.

Méthode d'implémentation du routage front-end :

• Implémenté par hachage Lorsque le hachage de l'URL change, le rappel enregistré par hashchange est déclenché (les versions inférieures n'en ont pas). les événements de changement de hachage, via l'implémentation de l'URL de détection de réincarnation), effectuent différentes opérations et affichent un contenu différent dans le rappel.
  Si le hachage est utilisé pour l'implémenter, # doit être inclus dans les règles URI. Le contenu après # dans la route est le hachage À proprement parler, le point d'ancrage dont nous parlons souvent devrait être le a[name] et les autres éléments du fichier. page.

• L'API d'historique HTML5 exploite l'implémentation de l'historique de session du navigateur
  Les routes implémentées en fonction de l'historique sans # sont les routes d'origine

3.2 Stratégie de routage en 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如何打包

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!