angular 2 - 005 路由實現機制

angular2的路由是否是很神奇, url發生了變化卻沒有看到有任何請求發出?

1. hash模式

url相似 http://localhost:4200/#/task-list，跳轉到路由頁面再刷新仍是會停留在當前路由。這個是咱們熟知的路由實現方式, angular1.x用的是這種方式.
開啓方法: app.module.ts中引入並provider

import {HashLocationStrategy, LocationStrategy} from '@angular/common';
...
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
...

hashchange - 會添加history記錄

當URL的片斷標識符更改時，將觸發hashchange事件 (跟在＃符號後面的URL部分，包括＃符號)

2. HTML5 History 模式

angular-cli裏默認使用的是HTML5 History 模式，url相似 http://localhost:4200/task-list,URL看着比較舒服，比較美觀。在路由頁面刷新就會404, 這個須要服務端的配置支持.
現代HTML 5瀏覽器支持history.pushState API， 這是一項能夠改變瀏覽器的當前地址和歷史，卻又不會觸發服務端頁面請求的技術。 太神奇了

Adding and modifying history entries

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

pushState 和 replaceState - 添加和修改history記錄

pushState能夠改變當前的url卻不請求這個頁面, 甚至不檢查其存在. 這個就是ng2路由的原理 - ng2對每個路由執行pushState, 這樣瀏覽器的back按鈕就能工做了.
注意 pushState() 絕對不會觸發 hashchange 事件，即便新的URL與舊的URL僅哈希不一樣也是如此。

popstate

當活動歷史記錄條目更改時，將觸發popstate事件。若是被激活的歷史記錄條目是經過對history.pushState（）的調用建立的，或者受到對history.replaceState（）的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。
須要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在作出瀏覽器動做時，纔會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）
不一樣的瀏覽器在加載頁面時處理popstate事件的形式存在差別。頁面加載時Chrome和Safari一般會觸發(emit )popstate事件，但Firefox則不會。