Angular2 で URL から # 記号を削除する方法 (詳細なチュートリアル)-jsチュートリアル-php.cn

この記事では、Angular 2 以降で URL の # 記号を削除する方法に関する関連情報を主に紹介します。この記事では、最初に # 記号を削除する理由と方法を詳細に紹介および分析し、次にサンプルを通じて削除方法を示します。コード。必要な友人はそれを参照してください

前書き

この記事では主に Angular2+ の URL の # 番号の削除に関する関連内容を紹介します。これは私が最近仕事で遭遇した問題です。それは必要だと思いますので、これ以上は言いませんが、詳細な紹介を見てみましょう。

1. なぜ削除する必要があるのですか?

Angular関係者は、ハッシュスタイル(#)を使用する十分な理由がない場合は、HTML5モードのルーティングスタイルを使用してみてください
ハッシュスタイルが設定されている場合は、WeChat支払いを使用するか、 Angular のディープパス 404 の問題は依然として発生します
GA などのツールを使用する必要がある場合、# 番号の後の URL を取得できないため、ルートを切り替えるたびにパスが送信されます。
「#」は少し醜いです。

2. 削除方法は？

次の 4 つの方法があります:

フロントエンド + ngx
フロントエンド + Apache
フロントエンド + Tomcat
GithubPages / Code Cloud Pages + 40 4ページ

2.1 フロントエンド

index.html head Riga

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

ログイン後にコピー

app.module.ts

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

ログイン後にコピー

app.routes.ts:

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

ログイン後にコピー

フロントエンドのみを構成するとどうなりますか?

フロントエンドのみを設定した場合、「#」は削除されますが、ページを更新するとすぐに 404 が表示されます。これは、パス分析でエラーがあることを意味します。

Angular は、フロントエンドのルーティング機能を実装するシングルページアプリケーションです。バックエンドはルーティングジャンプを制御できなくなり、元々バックエンドに属していたすべてのビジネスロジックをフロントエンドにスローします。

ユーザーがページ (http://gitee.poetry/life) を更新すると、バックグラウンドルートに対応するページのルーティング管理がない場合、リクエストは最初に Web サーバーのバックグラウンドに送信されます。起こる。
ユーザーが最初にホームページ (http://gitee.poetry) にアクセスし、次にページ (http://gitee.poetry/life) にジャンプした場合、このジャンプは Angular フロントデスクによって管理される URL になります。アクセスは正常です。

その後、Angular が管理するすべてのルーティング URL を WebServer に後で紹介する設定情報であるindex.html に転送させることで、404 問題を解決できます。

考察: なぜハッシュモードは 404 ではないのでしょうか?

2.2 ngx設定

「***」を使用すると、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 詳細な説明:

リクエストがhttps://deepthan.gitee.io/の場合'$uri''$uri/' が見つからない場合は、try_files/index.html の最後のオプションに戻り、内部の「サブリクエスト」を開始します。つまり、nginx が https://deepthan.gitee.io/poetry/index.html への HTTP リクエストを開始するのと同じです。このリクエストは location ~ .php$ { ... } catch によってブロックされます。つまり、FastCGI ハンドラーに入ります。特定の URI とパラメーターは REQUEST_URI で FastCGI および WordPress プログラムに渡されるため、URI の変更による影響を受けません。

2.3 Apache

Apacheのルートディレクトリに新しい.htaccessファイルを作成する

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の設定

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

ログイン後にコピー

2.5 GithubPages / Code Cloud Pages + 404ページ

の場合github ページまたはコードクラウドP は、Github ページを直接構成することはできませんが、コミット時に 404 ページを追加できます。簡単な解決策は次のとおりです:

プロジェクトのルートディレクトリに新しい 404.html を作成し、index.html のコンテンツを 404.html に完全にコピーします。これを実行しても、github ページは適切なタイミングで 404 応答を返し、ブラウザはページを正しく処理し、アプリケーションを正常にロードします。

このハックについて: S(GH)PA: GitHub Pages のシングルページアプリハック

3. 「#」を使用する場合と「#」を使用しない場合の原理的な違いは何ですか?

3.1 まずフロントエンドルーティングとは何かについて話しましょう:

以前は、ルーティングはバックグラウンドで実行され、特定の HTML ページはユーザーがリクエストした URL を通じて特定の HTML ページに移動していました。フロントエンドでAngular、vue、reactを使用できるようになりました設定ファイルを介して、フロントエンド制御ルートジャンプ機能を実現できます。

フロントエンドルーティングの実装方法:

ハッシュ化によって実装されます。URLのハッシュが変更されると、hashchangeによって登録されたコールバックがトリガーされます(下位バージョンにはhashchangeイベントがなく、転生検出によって実装されます)。 URL の)、コールバックでさまざまな操作が実行され、さまざまなコンテンツが表示されます。
ハッシュを使用して実装する場合は、# を URI ルールに含める必要があります。厳密に言えば、ルート内の # の後の内容は、よく話題になるアンカーポイントです。ページ。
HTML5の履歴APIはブラウザのセッション履歴実装を操作します
# のない履歴に基づいて実装されたルートは、元のルートです

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




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

ログイン後にコピー

3.3 前端路由优缺点

优点：

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

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

缺点：

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

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

使用JavaScript如何实现抽奖系统

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

使用Parcel如何打包

以上がAngular2 で URL から # 記号を削除する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。