# SPA
* 后端路由對應的就是后端渲染(存在性能問題)比如:提交表單,用戶要提交表單,后端路由就會頻繁刷新,因此就出現了ajax技術。
* Ajax前端渲染(前端即客戶端提升性能局部刷新,但是不支持瀏覽器前進后退操作)
* SPA(**single page web application,SPA**)單頁面應用程序:整個網站只有一個頁面,內容的變化通過Ajax局部實現,同時支持瀏覽器地址的前進和后退操作。
* SPA實現原理:基于URL地址的hash(hash的變化會導致瀏覽器記錄訪問歷史的變化 ,但是hash的變化不會觸發新的URL請求。)
* 實現SPA過程中,最核心的技術點就是前端路由
# 基礎知識復習
## hash
兼容性

URL的hash也就是錨點(#), 本質上是改變window.location的href屬性.
我們可以通過直接賦值location.hash來改變href, 但是頁面不發生刷新

## history模式
history接口是HTML5新增的, 它有五種模式改變URL而不刷新頁面.
刷新后會出現問題,需要后端服務器支持。
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
| --- | --- | --- | --- | --- | --- |
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| `pushState`<br>`replaceState` | 5.0 | 4.0 | 10 | 11.5 | 5 |
### history.pushState()
添加,當前路由添加在歷史地址記錄里面,可以通過前進后退,查看

### history.replaceState()
即替換,當前路由就不再出現在歷史地址記錄里面

### history.go() history.forward() history.back()
都是對路由歷史訪問地址的跳轉。
go可以前進也可以后退 ,參數為正值 前進,參數為負值 后退
forward就是前進一步
back就是后退一步
