LocationStrategy以及浏览器URL样式

来自ling
跳转至： 导航， 搜索

[1]

当路由器导航到一个新的组件视图时，它会用该视图的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提供商来支持所有这些风格：

  • PathLocationStrategy - 默认的策略，支持“HTML 5 pushState”风格。
  • HashLocationStrategy - 支持“hash URL”风格。
  • HashLocationStrategy—the "hash URL" style.
  • RouterModule.forRoot函数把LocationStrategy设置成了PathLocationStrategy，使其成为了默认策略。 我们可以在启动过程中改写（override）它，来切换到HashLocationStrategy风格 —— 如果我们更喜欢这种。

要学习关于“提供商”和启动过程的更多知识，参见依赖注入一章。

哪种策略更好？

我们必须选择一种策略，并且在项目的早期就这么干。一旦该应用进入了生产阶段，要改起来可就不容易了，因为外面已经有了大量对应用URL的引用。

几乎所有的Angular项目都会使用默认的HTML 5风格。它生成的URL更易于被用户理解，它也为将来做服务端渲染预留了空间。

在服务器端渲染指定的页面，是一项可以在该应用首次加载时大幅提升响应速度的技术。那些原本需要十秒甚至更长时间加载的应用，可以预先在服务端渲染好，并在少于一秒的时间内完整呈现在用户的设备上。

只有当应用的URL看起来像是标准的Web URL，中间没有hash（#）时，这个选项才能生效。

除非你有强烈的理由不得不使用hash路由，否则就应该坚决使用默认的HTML 5路由风格。 

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent }          from './app.component';
import { PageNotFoundComponent } from './not-found.component';

const routes: Routes = [

];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
取自“https://wiki.ling2.cn/index.php?title=LocationStrategy以及浏览器URL样式&oldid=8119”