前端路由之angular路由配置的区别#和/

2018-12-9 一诺 js库

先说下什么是前端路由
以前路由都是后台做的,通过用户请求的url导航到具体的html页面,这种无法做单页应用
而一般要前端单页应用项目就会需要用到前端路由
现在我们在前端可以利用 Angular、vue、react等通过配置文件,达到前端控制路由跳转的功能。

前端路由的实现方法
1.通过hash实现
当url的hash发生改变时,不触发网页重载,触发hashchange注册的回调,回调中去进行不同的操作,进行不同的内容展示。
使用hash来实现的话,URI规则中要带上#,路由中#后边的内容就是hash
如 http://localhost:4200/#/home/page1
2.HTML5的history api操作浏览器的session history实现
基于history实现的路由中不带#,就是原始的路由
如 http://localhost:4200/home/page1

Angular中的路由策略
angular2提供的路由策略也是基于上面两个原理实现的
1.PathLocationStrategy - 默认的策略,支持“HTML 5 pushState”风格。
2.HashLocationStrategy - 支持“hash URL”风格。

两种路由策略的特点
1.默认策略 html5路由
    angular官方推荐使用
    需要服务端覆盖所有的路由情况
    可以使用GA等网页分析工具
    可使用服务端渲染
    美观
2.hash url 策略
    服务端配置一个根路由即可
    无法使用服务端渲染
    无法使用GA等网页分析工具
    不可使用服务端渲染
    不美观

扩展
html5路由(无#)
使用这个路由的常规路径不带#,这种策略需要后台配置支持,因为我们的应用是单页面应用,如果后台没有正确的配置,当用户在浏览器从一个路由跳往另外一个路由或者刷新时就会返回404,需要在服务端里面覆盖所有的路由情况(后端可以通过nginx或者apache等配置)。
只支持高版本浏览器(因ng只支持高版本浏览器,所以开发ng可忽略此项)

有hash
URL中包含的hash信息是不会提交到服务端,所以若要使用 SSR (Server-Side Rendered),就不能使用 Hash 模式即不能使用 HashLocationStrategy 策略。
如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题。

当你需要使用GA等网页分析工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径。

若设置路由中有#则可以如下配置
@NgModule({
  imports:[RouterModule.forRoot(routes,{useHash:true})]
})
// 或者
@NgModule({
  imports:[RouterModule.forRoot(routes)],
  providers:[
     {provide: LocationStrategy, useClass: HashLocationStrategy} 
  ]
})
无hash的后端配置
1.如果是配置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
 }
}
2.如果是配置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  
3.Tomcat配置
Tomcat/conf/web.xml文件上添加
<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>
4.GithubPages + 404 页面

对于github pages来说,我们没办法直接配置Github pages,但可以在commit时添加一个404页。
简单的解决方案如下:
我们在项目的根目录新建404.html,把index.html中的内容完全复制到404.html中就可以了。
这样做github pages仍然会在恰当的时候给出一个404响应,浏览器将会正确处理该页,并正常加载我们的应用。

参考链接:https://github.com/deepthan/blog-angular/issues/5

标签: 路由

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog