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

2018-12-9 Jon

先说下什么是前端路由

以前路由都是后台做的，通过用户请求的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

发表评论：