前言

本文中主要介紹了關于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 變化的影響。