Angular2+去除url中的#

時間 2019-11-16

標籤 angular2 angular 去除 url 欄目 AngularJS 简体版

原文原文鏈接

1. 爲何要去除？

Angular官方指出：若是沒有足夠使用hash風格（#）的理由，仍是儘可能使用HTML5模式的路由風格；javascript
若是配置了hash風格，在微信支付或是Angular的深路徑依然會出404的問題；php
當你須要使用GA等工具時，因爲沒法獲取#號後的URL，致使每次路由切換都給其發送一個路徑；html
'#'有點醜。前端

2. 怎樣才能去除？

有四個方法：vue

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

2.1 前端

index.html的head里加html5

<base href="/">
複製代碼

app.module.tsjava

import { ROUTER_CONFIG } from './app.routes.ts';
@NgModule({
   imports: [
    ...
    RouterModule.forRoot(ROUTER_CONFIG) 
   //  RouterModule.forRoot(ROUTER_CONFIG, { useHash: true } )   這樣寫是帶#的
  ],  
})

複製代碼

app.routes.ts：react

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';

export const ROUTER_CONFIG: Routes = [
  {
   ...
  }
];

複製代碼

若是隻配置前端會怎麼樣？

若是隻配置前端雖然會去掉'#'可是一刷新頁面就404，路徑解析上出錯了。 Angular是單頁應用，它實現了前端路由功能，後臺能夠再也不控制路由的跳轉，將本來屬於後端的業務邏輯所有丟給前端。nginx

用戶刷新頁面時(http://gitee.poetry/life)，請求是先被提交到了WebServer後臺，後臺路由沒有對應頁面的路由管理，就會出現404的錯誤。git
用戶若是是先訪問首頁(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等經過配置文件，達到前端控制路由跳轉的功能。

前端路由的實現方法：

經過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/">
複製代碼

在後端的服務器上，用下面的正則去匹配全部的頁面請求導向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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。