前言
本文中主要介绍了关于angular2+中去除url中#号的相关内容，这是最近在工作中遇到的一个问题，觉着有必要给大家分享下，下面话不多说了，来一起看看详细的介绍吧。
1. 为什么要去除？
2. 怎样才能去除？
有四个方法：
2.1 前端
的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，都转发到就可以解决404的问题了，也就是后面介绍的配置信息。
思考：hash模式为什么不会404？
2.2 ngx配置
带'***'的是需要自己配置 nginx.conf 文件内容
server {
listen 80; #监听的端口号
server_name my_server_name; # 服务器名称 ***
root /projects/angular/myproject/dist; #相对于nginx的位置 ***
index ; #如果存在，就结束查找过程，把这个文件附加到请求的request_uri后面，并且发起一个内部的redirect。
location / { # / 是匹配所有的uri后执行下面操作
try_files $uri $uri/ /; #try_files先寻找名为 $uri 文件，没有则寻找 $uri/ 文件，再没有就寻找/
}
}
try_files 详细解释：
如请求的是https://deepthan.gitee.io/poetry/life, $uri则是‘/life',如果‘$uri'‘$uri/'都找不到，就会 fall back 到 try_files 的最后一个选项 /发起一个内部 “子请求”，也就是相当于 nginx 发起一个 http 请求到https://deepthan.gitee.io/poetry/。这个请求会被 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]
# 如果请求的资源不存在，则使用
rewriterule ^ /
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，把中的内容完全复制到404.html中就可以了。这样做github pages仍然会在恰当的时候给出一个404响应，浏览器将会正确处理该页，并正常加载我们的应用。
关于这方面的hack：
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
]
})
更改中的base href属性，angular将通过这个属性来处理路由跳转
<base href="/app/" rel="external nofollow" rel="external nofollow" >
在后端的服务器上，用下面的正则去匹配所有的页面请求导向页面。
we must render the file for any request coming with below pattern
<!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地址，用前端路由做单页面网页就很好的解决了这个问题。
缺点：
使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论