Angular2+去除url中的#

莫莫莫發表於2017-12-20
Angular

1. 為什麼要去除？

  • Angular官方指出：如果沒有足夠使用hash風格（#）的理由，還是儘量使用HTML5模式的路由風格；

  • 如果配置了hash風格，在微信支付或是Angular的深路徑依然會出404的問題；

  • 當你需要使用GA等工具時，由於無法獲取#號後的URL，導致每次路由切換都給其傳送一個路徑；

  • '#'有點醜。

2. 怎樣才能去除？

有四個方法：

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

index.html的head里加

<base href="/">
複製程式碼

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)，請求是先被提交到了WebServer後臺，後臺路由沒有對應頁面的路由管理，就會出現404的錯誤。

  • 使用者如果是先訪問首頁(http://gitee.poetry)，然後再跳轉到 頁面(http://gitee.poetry/life)，則這個跳轉是由Angular前臺管理的URL，訪問是正常的。

那麼我們讓WebServer把屬於Angular管理的路由URL，都轉發到index.html就可以解決404的問題了，也就是後面介紹的配置資訊。

思考：hash模式為什麼不會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/’都找不到，就會 fall back 到 try_files 的最後一個選項 /index.html發起一個內部 “子請求”，也就是相當於 nginx 發起一個 HTTP 請求到https://deepthan.gitee.io/poetry/index.html。這個請求會被 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 / 碼雲 Pages + 404 頁面

對於github pages或碼雲 Pages來說，我們沒辦法直接配置Github pages，但可以在commit時新增一個404頁。簡單的解決方案如下：
我們在專案的根目錄新建404.html，把index.html中的內容完全複製到404.html中就可以了。這樣做github pages仍然會在恰當的時候給出一個404響應，瀏覽器將會正確處理該頁，並正常載入我們的應用。

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

3. 帶‘#’和不帶‘#’原理上有什麼區別呢？

3.1 這個得先說下什麼是前端路由：

以前路由都是後臺做的，通過使用者請求的url導航到具體的html頁面，現在我們在前端可以利用 Angular、vue、react等通過配置檔案，達到前端控制路由跳轉的功能。

前端路由的實現方法：

  1. 通過hash實現 當url的hash發生改變時，觸發hashchange註冊的回撥（低版本沒有hashchange事件，通過輪迴檢測url實現），回撥中去進行不同的操作，進行不同的內容展示。
    使用hash來實現的話，URI規則中要帶上#，路由中#後邊的內容就是hash，我們常說的錨點嚴格來說應該是頁面中的a[name]等元素。

  2. 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/">
複製程式碼

在後端的伺服器上，用下面的正則去匹配所有的頁面請求導向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/">
  <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 前端路由優缺點

  • 優點：
    1.從效能和使用者體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向伺服器傳送請求，然後伺服器再響應請求，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網路延遲，對於使用者體驗來說會有相當大的提升。
    2.在某些場合中，用ajax請求，可以讓頁面無重新整理，頁面變了但Url沒有變化，使用者不能獲取到想要的url地址，用前端路由做單頁面網頁就很好的解決了這個問題。

  • 缺點：
    使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取。

如果覺得文章不錯，不妨點個贊。
首發於github

相關文章