angular2 路由策略 LocationStrategy

随着前端技术的发展和迭代，前端MVC框架应运而生。利用目前主流的前端框架，如angular react vue等等，我们可以轻松的构建起一个无需服务器端渲染就可以展示的网站，同时这类框架都提供了前端路由功能，后台可以不再控制路由的跳转，将原本属于后端的业务逻辑全部丢给前端。

什么是路由

简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：

http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat
那么其路径就分别是 /，/about，/concat。
当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作拿到前端来做。
简单的说，路由是根据不同的 url 地址展示不同的内容或页面

前端路由

1. 通过hash实现：当url的hash发生改变时，触发hashchange注册的回调（低版本的浏览器没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示

使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，而我们常说的锚点严格来说应该是页面中的a[name]等元素
http://10.0.0.1/
http://10.0.0.1/#/about
http://10.0.0.1/#/concat

2. HTML5的history api操作浏览器的session history实现

基于history实现的路由中不带#，就是原始的路由
http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat

angular2中的路由策略

angular2提供的路由策略也是基于上面两个原理实现的，可以在@NgModule中通过providers配置或RouterModule.forRoot()配置

@NgModule({
  imports:[RouterModule.forRoot(routes,{useHash:true})]
})

@NgModule({
  imports:[RouterModule.forRoot(routes)],
  providers:[
     {provide: LocationStrategy, useClass: HashLocationStrategy} 
  ]
})

PathLocationStrategy
angular2的默认策略，也就是HTML5路由，使用这个路由的常规路径就是/concat,/about,不带#，这种策略需要后台配置支持，因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器从http:/10.0.0.1/concat跳转到http:/10.0.0.1/about或者刷新时就会返回404，需要在服务端里面覆盖所有的路由情况（后端可以通过nginx或者apache等配置）。
HashLocationStragegy
适用于基于锚点标记的路径，比如/#/concat,/#/about，后端只需要配置一个根路由即可。
订制自己的路由策略
通过扩展LocationStragegy类并实现一些方法，定制自己的策略。

总结

hash方案：路径比较丑，但是兼容老的浏览器，如果应用需要兼容低版本浏览器推荐使用
纯h5方案：只支持高版本浏览器
ng2目前只支持高版本浏览器，所以开发只要用了ng2，就无法兼容低版本浏览器 O(∩_∩)O~~

参考文章：http://www.cnblogs.com/yuqing6/p/6731980.html