前言
本文中主要介紹了關于Angular2+中去除url中#號的相關內容，這是最近在工作中遇到的一個問題，覺著有必要給大家分享下，下面話不多說了，來一起看看詳細的介紹吧。
1. 為什么要去除？
2. 怎樣才能去除？
有四個方法：
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 = [ { ... }];如果只配置前端會怎么樣？
如果只配置前端雖然會去掉'#'但是一刷新頁面就404，路徑解析上出錯了。
Angular是單頁應用，它實現了前端路由功能，后臺可以不再控制路由的跳轉，將原本屬于后端的業務邏輯全部丟給前端。
那么我們讓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.htmlRewriteRule ^ /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等通過配置文件，達到前端控制路由跳轉的功能。
前端路由的實現方法：
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
<!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 前端路由優缺點
優點：
1.從性能和用戶體驗的層面來比較的話，后端路由每次訪問一個新頁面的時候都要向服務器發送請求，然后服務器再響應請求，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網絡延遲，對于用戶體驗來說會有相當大的提升。
2.在某些場合中，用ajax請求，可以讓頁面無刷新，頁面變了但Url沒有變化，用戶不能獲取到想要的url地址，用前端路由做單頁面網頁就很好的解決了這個問題。
缺點：
使用瀏覽器的前進，后退鍵的時候會重新發送請求，沒有合理地利用緩存。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
