Angular2+如何去除url中的#號(hào)詳解

前言

本文中主要介紹了關(guān)于Angular2+中去除url中#號(hào)的相關(guān)內(nèi)容，這是最近在工作中遇到的一個(gè)問題，覺著有必要給大家分享下，下面話不多說了，來一起看看詳細(xì)的介紹吧。

1. 為什么要去除？

• Angular官方指出：如果沒有足夠使用hash風(fēng)格（#）的理由，還是盡量使用HTML5模式的路由風(fēng)格；
• 如果配置了hash風(fēng)格，在微信支付或是Angular的深路徑依然會(huì)出404的問題；
• 當(dāng)你需要使用GA等工具時(shí)，由于無法獲取#號(hào)后的URL，導(dǎo)致每次路由切換都給其發(fā)送一個(gè)路徑；
• '#'有點(diǎn)丑。

2. 怎樣才能去除？

有四個(gè)方法：

• 前端 + ngx
• 前端 + Apache
• 前端 + Tomcat
• GithubPages / 碼云 Pages + 404 頁面

2.1  前端

index.html的head里加

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

如果只配置前端會(huì)怎么樣？

如果只配置前端雖然會(huì)去掉'#'但是一刷新頁面就404，路徑解析上出錯(cuò)了。
Angular是單頁應(yīng)用，它實(shí)現(xiàn)了前端路由功能，后臺(tái)可以不再控制路由的跳轉(zhuǎn)，將原本屬于后端的業(yè)務(wù)邏輯全部丟給前端。

• 用戶刷新頁面時(shí)(http://gitee.poetry/life)，請(qǐng)求是先被提交到了WebServer后臺(tái)，后臺(tái)路由沒有對(duì)應(yīng)頁面的路由管理，就會(huì)出現(xiàn)404的錯(cuò)誤。
• 用戶如果是先訪問首頁(http://gitee.poetry)，然后再跳轉(zhuǎn)到 頁面(http://gitee.poetry/life)，則這個(gè)跳轉(zhuǎn)是由Angular前臺(tái)管理的URL，訪問是正常的。

那么我們讓W(xué)ebServer把屬于Angular管理的路由URL，都轉(zhuǎn)發(fā)到index.html就可以解決404的問題了，也就是后面介紹的配置信息。

思考：hash模式為什么不會(huì)404？

2.2 ngx配置

帶'***'的是需要自己配置 nginx.conf 文件內(nèi)容

server {
 listen 80; #監(jiān)聽的端口號(hào) 
 server_name my_server_name; # 服務(wù)器名稱 ***
 root /projects/angular/myproject/dist; #相對(duì)于nginx的位置 ***
 index index.html; #如果index.html存在，就結(jié)束查找過程，把這個(gè)文件附加到請(qǐng)求的request_uri后面，并且發(fā)起一個(gè)內(nèi)部的redirect。
 location / { # / 是匹配所有的uri后執(zhí)行下面操作
 try_files $uri $uri/ /index.html; #try_files先尋找名為 $uri 文件，沒有則尋找 $uri/ 文件，再?zèng)]有就尋找/index.html
 }
}

try_files 詳細(xì)解釋：

如請(qǐng)求的是https://deepthan.gitee.io/poetry/life, $uri則是‘/life',如果‘$uri'‘$uri/'都找不到，就會(huì) fall back 到 try_files 的最后一個(gè)選項(xiàng) /index.html發(fā)起一個(gè)內(nèi)部 “子請(qǐng)求”，也就是相當(dāng)于 nginx 發(fā)起一個(gè) HTTP 請(qǐng)求到https://deepthan.gitee.io/poetry/index.html。這個(gè)請(qǐng)求會(huì)被 location ~ .php$ { ... } catch 住，也就是進(jìn)入 FastCGI 的處理程序。而具體的 URI 及參數(shù)是在 REQUEST_URI 中傳遞給 FastCGI 和 WordPress 程序的，因此不受 URI 變化的影響。

2.3 Apache

Apache的根目錄新建一個(gè).htaccess文件

RewriteEngine On 
# 如果請(qǐng)求的是現(xiàn)有資源，則按原樣執(zhí)行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule ^ - [L]
# 如果請(qǐng)求的資源不存在，則使用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 / 碼云 Pages + 404 頁面

對(duì)于github pages或碼云 Pages來說，我們沒辦法直接配置Github pages，但可以在commit時(shí)添加一個(gè)404頁。簡(jiǎn)單的解決方案如下：

我們?cè)陧?xiàng)目的根目錄新建404.html，把index.html中的內(nèi)容完全復(fù)制到404.html中就可以了。這樣做github pages仍然會(huì)在恰當(dāng)?shù)臅r(shí)候給出一個(gè)404響應(yīng)，瀏覽器將會(huì)正確處理該頁，并正常加載我們的應(yīng)用。

關(guān)于這方面的hack： S(GH)PA: The Single-Page App Hack for GitHub Pages

3. 帶‘#'和不帶‘#'原理上有什么區(qū)別呢？

3.1  這個(gè)得先說下什么是前端路由：

以前路由都是后臺(tái)做的，通過用戶請(qǐng)求的url導(dǎo)航到具體的html頁面，現(xiàn)在我們?cè)谇岸丝梢岳?Angular、vue、react等通過配置文件，達(dá)到前端控制路由跳轉(zhuǎn)的功能。

前端路由的實(shí)現(xiàn)方法：

• 通過hash實(shí)現(xiàn) 當(dāng)url的hash發(fā)生改變時(shí)，觸發(fā)hashchange注冊(cè)的回調(diào)（低版本沒有hashchange事件，通過輪回檢測(cè)url實(shí)現(xiàn)），回調(diào)中去進(jìn)行不同的操作，進(jìn)行不同的內(nèi)容展示。
  使用hash來實(shí)現(xiàn)的話，URI規(guī)則中要帶上#，路由中#后邊的內(nèi)容就是hash，我們常說的錨點(diǎn)嚴(yán)格來說應(yīng)該是頁面中的a[name]等元素。
• HTML5的history api操作瀏覽器的session history實(shí)現(xiàn)
  基于history實(shí)現(xiàn)的路由中不帶#，就是原始的路由

3.2 Angular中的路由策略

angular2提供的路由策略也是基于上面兩個(gè)原理實(shí)現(xiàn)的，可以在@NgModule中通過providers配置或RouterModule.forRoot()配置：

1） 路由中有#

@NgModule({
 imports:[RouterModule.forRoot(routes,{useHash:true})]
})

或

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

HashLocationStragegy

適用于基于錨點(diǎn)標(biāo)記的路徑，比如/#/**，后端只需要配置一個(gè)根路由即可。

2） html5路由（無#）

改用 PathLocationStrategy（angular2的默認(rèn)策略，也就是HTML5路由），使用這個(gè)路由的常規(guī)路徑不帶#，這種策略需要后臺(tái)配置支持，因?yàn)槲覀兊膽?yīng)用是單頁面應(yīng)用，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器從一個(gè)路由跳往另外一個(gè)路由或者刷新時(shí)就會(huì)返回404，需要在服務(wù)端里面覆蓋所有的路由情況（后端可以通過nginx或者apache等配置）。

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
 {provide: LocationStrategy, useClass: PathLocationStrategy} 
 // 這一行是可選的，因?yàn)槟J(rèn)的LocationStrategy是PathLocationStrategy
 ]
})

更改index.html中的base href屬性，Angular將通過這個(gè)屬性來處理路由跳轉(zhuǎn)

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

在后端的服務(wù)器上，用下面的正則去匹配所有的頁面請(qǐng)求導(dǎo)向index.html頁面。

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

index.html

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>My App</title>
 <base href="/app/" rel="external nofollow" rel="external nofollow" >
 <body>
 <app-root>Loading...</app-root>
 <script type="text/javascript" src="vendor.bundle.js"></script>
 <script type="text/javascript" src="main.bundle.js"></script>
 </body>
</html>

3.3 前端路由優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1.從性能和用戶體驗(yàn)的層面來比較的話，后端路由每次訪問一個(gè)新頁面的時(shí)候都要向服務(wù)器發(fā)送請(qǐng)求，然后服務(wù)器再響應(yīng)請(qǐng)求，這個(gè)過程肯定會(huì)有延遲。而前端路由在訪問一個(gè)新頁面的時(shí)候僅僅是變換了一下路徑而已，沒有了網(wǎng)絡(luò)延遲，對(duì)于用戶體驗(yàn)來說會(huì)有相當(dāng)大的提升。

2.在某些場(chǎng)合中，用ajax請(qǐng)求，可以讓頁面無刷新，頁面變了但Url沒有變化，用戶不能獲取到想要的url地址，用前端路由做單頁面網(wǎng)頁就很好的解決了這個(gè)問題。

缺點(diǎn)：

使用瀏覽器的前進(jìn)，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求，沒有合理地利用緩存。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。