在Angular2中如何去除url中的#號（詳細教程）

這篇文章主要給大家介紹了關於Angular 2 時如何去除url中#號的相關資料，文中先對#號去除的原因及方法進行詳細的介紹和分析，然後通過示例代碼給大家演示去除的方法，需要的朋友可以參考借鑒

前言

本文中主要介紹了關於Angular2 中去除url中#號的相關內容，這是最近在工作上遇到的一個問題，覺著有必要跟大家分享下，下面話不多說了，來一起看看詳細的介紹吧。

1. 為什麼要去除？

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

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

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

• '#'有點醜。

2. 要怎麼移除？

有四個方法：

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

如果只配置前端會怎麼樣？

如果只配置前端雖然會去掉'#'但是一刷新頁面就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等透過設定文件，達到前端控制路由跳轉的功能。

前端路由的實作方法：

透過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

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

3.3 前端路由优缺点

优点：

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

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

缺点：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用JavaScript如何实现抽奖系统

详细解答vue的变化对组件有什么影响？

使用Parcel如何打包

以上是在Angular2中如何去除url中的#號（詳細教程）的詳細內容。更多資訊請關注PHP中文網其他相關文章！