ホームページ  >  記事  >  ウェブフロントエンド  >  Angular2でURLから#記号を削除する方法を詳しく解説

Angular2でURLから#記号を削除する方法を詳しく解説

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-14 11:13:501457ブラウズ

今回は Angular2 で URL から # 記号を削除する操作について詳しく説明します。 Angular2 で URL から # 記号を削除するときの 注意事項 とは何ですか。見て。

はじめに

この記事では、Angular2+ で URL の # 記号を削除することに関する内容を主に紹介します。これは、私が最近仕事で遭遇した問題なので、以下ではあまり触れません。詳細を見てみましょう。

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

  • Angular 公式は次のように指摘しています: ハッシュ スタイル (#) を使用する十分な理由がない場合は、HTML5 モードのルーティング スタイルを使用してみてください

  • ハッシュ スタイルが設定されている場合でも、WeChat 支払いまたは Angular のディープで 404 の問題が発生します。パス;
  • GAなどのツールを使用する必要がある場合、#記号以降のURLが取得できないため、ルートが切り替わるたびにパスが送信されます
  • '#'は少し醜い。

2. 削除方法は?

4つの方法があります:

  • フロントエンド + ngx

  • フロントエンド + Apache
  • フロントエンド + Tomcat
  • GithubPages / コードクラウド ページ + 404 ページ

2.1 フロントエンド

Index.htmlの先頭を追加しました

<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 = [
 {
 ...
 }
];
フロントエンドのみを構成するとどうなるでしょうか?

フロントエンドのみを構成した場合、「#」は削除されますが、ページが更新されるとすぐに、パス解決のエラーを示す 404 が表示されます。

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

  • ユーザーがページ (http://gitee.poetry/life) を更新すると、リクエストはまず Web サーバーのバックグラウンドに送信されます。バックグラウンド ルートに対応するページのルーティング管理がない場合、404 エラーが発生します。

  • ユーザーが最初にホームページ (http://gitee.poetry) にアクセスし、次にページ (http://gitee.poetry/life) にジャンプした場合、このジャンプは Angular フロント デスクによって管理される URL になります。は普通。
次に、Angular によって管理されるすべてのルーティング URL を、後で紹介する構成情報であるindex.html に転送するように WebServer に依頼することで、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/poetry/life の場合、 $uri は「/life」です。「$uri」も $uri/ も見つからない場合は、try_files の最後のオプションに戻ります。 /index.html は内部「サブリクエスト」を開始します。これは、nginx が HTTP を開始するのと同等です。 https://deepthan.gitee.io/poetry/index.html にリクエストしてください。このリクエストは場所 ~ .php$ { によって送信されます。 ... } catch、つまり、FastCGI ハンドラーに入ります。特定の URI とパラメータが REQUEST_URI に渡されます。 FastCGI および WordPress プログラムなので、URI の変更の影響を受けません。

2.3 アパッチ

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 / コードクラウドページ + 404 ページ

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

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

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

3. 「#」がある場合と「#」がない場合の原理的な違いは何ですか?

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




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

3.3 前端路由优缺点

优点:

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

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

缺点:

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

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

推荐阅读:



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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。