Angular项目实战Angular2+如何去除URL中的#号

人生难得几回搏，此时不搏待何时。这篇文章主要讲述Angular项目实战Angular2+如何去除URL中的#号相关的知识，希望能为你提供帮助。
最近，接到反馈说百度统计无法对 #号后的 URL 进行分析，需要前端去掉 URL 中的 #，下面分享一下关于这个问题的处理过程。

?1、Angular2+ 路由策略?
?1.1 HashLocationStragegy?通过 hash 实现，当 ?URL? 的 hash 发生改变时，触发 hashchange 注册的回调（低版本的浏览器没有 hashchange 事件，通过轮回检测 ?URL? 实现），回调中去进行不同的操作，进行不同的内容展示。
使用 hash 来实现的话，?URL? 规则中要带上 #，路由中 # 后边的内容就是 hash。而我们常说的“锚点”，严格来说，指的就是页面中的 a[name] 等元素。?URL? 格式如下：

http://121.201.95.249/#/home

适用基于锚点标记的路径，比如/#/concat，/#/about，后端只需要配置一个根路由即可。

?1.2 PathLocationStrategy?通过 history 实现，Angular2 的默认策略，也就是 html5 路由，使用这个路由的常规路径就是 /concat，/about，不带 #。
URL 格式如下：

http:// 121.201.95.249/home

这种策略需要后台配置支持，因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器从 http: // 121.201.95.249/concat 跳转到 http: // 121.201.95.249/about ，或者刷新时就会返回404，需要在服务端里面覆盖所有的路由情况（后端可以通过 nginx 或者 apache 等配置）。

?2、如何去除?
主要分两部分，前端路由策略模式修改，以及后端服务器配置。
在我的项目中，后端服务器所使用的是 Apache，下面将以这个为例子进行解析。
?2.1 前端修改?【Angular项目实战Angular2+如何去除URL中的#号】index.html 文件：
在 head 里设置 base-href，如果没有设置，当通过“深链接”进入该应用时，浏览器就不能正确的加载网站资源（图片、CSS、脚本），如下：

< base href="https://www.songbingjia.com/">

base-href，主要是设置项目访问的根目录，如果项目是放在服务器某一文件夹里面，比如通过 http: // 121.201.95.249/myApp/home 才访问到项目，那么，根目录设置如下：

< base href="https://www.songbingjia.com/myApp/">

app.module.ts文件：
importROUTER_CONFIGfrom ./app.routes.ts;
@NgModule(
imports: [
...
RouterModule.forRoot(routes)
// RouterModule.forRoot(routes,useHash: true) 这样写是带#的
],
)

app.routes.ts文件：
importNgModulefrom @angular/core;
importRoutesfrom @angular/router;
export const routes: Routes = [

...

];

设置到这里便可以实现去掉 “#” 跳转了，但每次刷新或直接输入链接进到页面时，都会有报错提示：404找不到页面。
因此，我们需要后端配合做路由重定向。

?2.2 后端服务器配置?Apache配置文件修改：

RewriteEngine On
# 如果请求的是现有资源，则按原样执行
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
RewriteRule ^ - [L]
# 如果请求的资源不存在，则使用index.html
RewriteRule ^ /index.html

Apache Rewrite 配置就是用来设置重定向的，上面5行（不包括 # 的注释内容）配置内容的意思是：
?第一行：将RewriteEngine引擎设置为on，就是让url重写生效，用于开启rewrite功能；?
?第二行：RewriteCond是指令定义了一个规则的条件，即在一个RewriteRule指令之前有一个或多个RewriteCond指令。?条件之后的重写规则（RewirteRule）仅在当前URI与pattern匹配并且符合这些条件的时候才会起作用。上面的匹配规则意思是，如果文件存在，就直接访问文件，执行第四行重写规则（RewirteRule）停止分析，否则执行第三行；
?第三行：如果目录存在就直接访问目录，然后执行第四行重写规则（RewirteRule）停止分析；?
?第四行：表明当前规则是最后一条规则，停止分析后面的规则；?
?第五行：把请求发送到index.html；当第二第三条规则都不满足的时候，就不执行第四行的RewriteRule，直接执行第五行的RewriteRule，把请求发送到index.html，实现重定向。?

想对规则进行更多了解，请查看??这篇文章?? ，下面说一下 Apache 的配置步骤。
如果是在集成环境，比如 uwamp、wamp 或 Apache1，可以打开配置文件httpd.conf。
如果是 Apache2，则打开配置文件 /etc/apache2/apache2.conf，进行修改。

（1）引入重写rewrite模块如果是集成环境或者 Apache1，找到#LoadModule rewrite_module modules/mod_rewrite.so，去掉前面的 “#”：

LoadModule rewrite_module modules/mod_rewrite.so

如果是 Apache2，执行命令加载 Rewrite 模块：

a2enmod rewrite

执行后，会提示 OK 和重启 Apache 命令（/etc/init.d/apache2 restart）。

（2）添加配置规则

< VirtualHost *:80>
ServerName myApp
DocumentRoot /www/myApp
< Directory /www/myApp>
RewriteEngine on
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
< /Directory>
< /VirtualHost>

这里的 “/www/myApp” 是存放项目的根目录路径。前端的同学使用集成环境比较多，有可能无法完全理解，小编拿 uwamp 环境作为例子解析一下。index.html 文件：

< base href="https://www.songbingjia.com/dist">

项目打包到 dist 文件中，然后把 dist 文件内容放到 www 下面，即www/dist，里面就是打包后的内容 index.html 以及各种 js 包，然后打开配置文件 httpd.conf：

引入重写 rewrite 模块，找到 #LoadModule rewrite_module modules/mod_rewrite.so，去掉前面的 ”#” ：

添加规则：

< VirtualHost *:80>
DocumentRoot "DOCUMENTPATH/"
< Directory "DOCUMENTPATH/dist">
Options FollowSymLinks
AllowOverride All
RewriteEngine On
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
RewriteRule ^ - [L]
RewriteRule ^ index.html
< /Directory>
< /VirtualHost>

（3）重启ApacheApache1 重启

# service httpd restart

Apache2 重启

# /etc/init.d/apache2 restart

或者

# service apache2 restart

uwamp 环境的重启，需要打开 uwamp 界面，先点击关闭，再开启即可。详细操作如下：

（4）刷新页面刷新页面后，我们会发现不再是404报错了，设置成功。
设置过程中需要留意的几个坑是：

没有设置 base-href，或者设置错误
Rewrite 模块没有引入
忘记重启 Apache

?3、小结?
对于我们现在的 SPA 单页面应用（angular、vue、react），想去掉URL上的 “#” ，都可以用这样的配置思路：将路由 hash 模式改为 history 模式。
由于 history 模式下，改变 URL 路径后会重新请求资源，从而导致了404的情况，因此我们需要在服务器上做重定向配置回到我们 index 页面，重新匹配路由进行页面展示。

下期给大家分享更多实战中的点滴，如果大家喜欢 Angular 或对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！