angular8 路由策略 LocationStrategy

一、什么是路由

假如我们有一台提供 Web 服务的服务器的网络地址是：127.0.0.1（localhost），而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：
http://127.0.0.1/login/login
http://127.0.0.1/plan/plan-home
http://127.0.0.1/design/design-home
http://127.0.0.1/execution/execution-home
那么其路径就分别是 /login/login，/plan/plan-home，/design/design-home, /execution/execution-home。
当用户使用 http://127.0.0.1/login/login 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /login/login，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作拿到前端来做。
简单的说，路由是根据不同的 url 地址展示不同的内容或页面

二、 前端路由

2.1、hash实现

1. 当url的hash发生改变时，触发hashchange注册的回调（低版本的浏览器没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示
2. 使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，而我们常说的锚点严格来说应该是页面中的a[name]等元素
3. http://127.0.0.1/#/login/login
   http://127.0.0.1/#/plan/plan-home
   http://127.0.0.1/#/design/design-home
   http://127.0.0.1/#/execution/execution-home
   

2.2、HTML5实现

api操作浏览器的session history实现基于history实现的路由中不带#，就是原始的路由
http://127.0.0.1/login/login
http://127.0.0.1/plan/plan-home
http://127.0.0.1/design/design-home
http://127.0.0.1/execution/execution-home

默认情况下就是

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

2.3、Aangular8路由策略实现

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

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

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

三、优点

1. 无需后台配置，单页面应用程序。（传统的HTML5需要后台的配置)
2. 适用于基于锚点标记的路径。
3. 可以定制自己需要的路由及路由参数。

四、总结

1. hash方案：路径比较丑，但是兼容老的浏览器，如果应用需要兼容低版本浏览器推荐使用。
2. 纯h5方案：只支持高版本浏览器。

五、学习地址

CSDN路由策略