Angular2+如何去除url中的#号详解

前言

本文中主要介绍了关于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 变化的影响。