angular 路由策略

Posted on 2020-04-26 13:26  colson.zhao  阅读(429)  评论(0)    收藏  举报

定义:路由策略决定angular将使用URL的那一部分来和路由配置项的path属性进行匹配。

当路由器导航到一个新的组件视图时,它会用该视图的 URL 来更新浏览器的当前地址以及历史。 严格来说,这个 URL 其实是本地的,浏览器不会把该 URL 发给服务器,并且不会重新加载此页面。

现代 HTML 5 浏览器支持history.pushState API, 这是一项可以改变浏览器的当前地址和历史,却又不会触发服务端页面请求的技术。 路由器可以合成出一个“自然的”URL,它看起来和那些需要进行页面加载的 URL 没什么区别。

下面是危机中心的 URL 在“HTML 5 pushState”风格下的样子:

      
localhost:3002/crisis-center/
    

老旧的浏览器在当前地址的 URL 变化时总会往服务器发送页面请求……唯一的例外规则是:当这些变化位于“#”(被称为“hash”)后面时不会发送。通过把应用内的路由 URL 拼接在 # 之后,路由器可以获得这条“例外规则”带来的优点。下面是到危机中心路由的“hash URL”:

      
localhost:3002/src/#/crisis-center/
    

路由器通过两种 LocationStrategy 提供者来支持所有这些风格:

  1. PathLocationStrategy - 默认的策略,支持“HTML 5 pushState”风格。

  2. HashLocationStrategy - 支持“hash URL”风格。

RouterModule.forRoot() 函数把 LocationStrategy 设置成了 PathLocationStrategy,使其成为了默认策略。 你可以在启动过程中改写(override)它,来切换到 HashLocationStrategy 风格 —— 如果你更喜欢这种。

 

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3