简体繁体 English

在URL中没有哈希字符的情况下，angular2的spa路由如何工作？

[英]How is the spa routing of angular2 working without the hash character in the url?

原文 2017-02-02 13:52:27 7 1 javascript/ angular/ angular-ui-router/ single-page-application/ router

When performing the angular2 "Tour of Heros" tutorial, I just noticed their spa router works without a trailing hash (#) character in the url (like kendo spa router does for instance). 在执行angular2“英雄巡回赛”教程时，我只是注意到他们的spa路由器工作时在URL中没有结尾的井号（＃）字符（例如，像kendo spa路由器那样）。

How does angular2 make it work without the browser perform a full page reload ? angular2如何使它在浏览器不执行整个页面重新加载的情况下工作？

1 个解决方案

It is using the modern browser features to do the trick. 它使用现代的浏览器功能来完成操作。

read the official angular docs. 阅读官方的角度文档。

https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles

Appendix: LocationStrategy and browser URL styles 附录：LocationStrategy和浏览器URL样式

When the router navigates to a new component view, it updates the browser's location and history with a URL for that view. 当路由器导航到新的组件视图时，它将使用该视图的URL更新浏览器的位置和历史记录。 This is a strictly local URL. 这是严格的本地URL。 The browser shouldn't send this URL to the server and should not reload the page. 浏览器不应将此URL发送到服务器，也不应重新加载页面。

Modern HTML 5 browsers support history.pushState, a technique that changes a browser's location and history without triggering a server page request. 现代HTML 5浏览器支持history.pushState，该技术可更改浏览器的位置和历史记录而无需触发服务器页面请求。 The router can compose a "natural" URL that is indistinguishable from one that would otherwise require a page load. 路由器可以构成一个“自然” URL，该URL与否则需要页面加载的URL不能区分。

Here's the Crisis Center URL in this "HTML 5 pushState" style: 这是这种“ HTML 5 pushState”样式的危机中心URL：