SPA應用 · Vue-講義07

# SPA * 后端路由對應的就是后端渲染（存在性能問題）比如：提交表單，用戶要提交表單，后端路由就會頻繁刷新，因此就出現了ajax技術。 * Ajax前端渲染（前端即客戶端提升性能局部刷新，但是不支持瀏覽器前進后退操作） * SPA(**single page web application，SPA**)單頁面應用程序：整個網站只有一個頁面，內容的變化通過Ajax局部實現，同時支持瀏覽器地址的前進和后退操作。 * SPA實現原理：基于URL地址的hash（hash的變化會導致瀏覽器記錄訪問歷史的變化，但是hash的變化不會觸發新的URL請求。） * 實現SPA過程中，最核心的技術點就是前端路由 # 基礎知識復習 ## hash 兼容性 ![](https://img.kancloud.cn/e5/48/e548fed73141e6d1a6fda1f332411f6b_505x69.png) URL的hash也就是錨點(#), 本質上是改變window.location的href屬性. 我們可以通過直接賦值location.hash來改變href, 但是頁面不發生刷新 ![](https://img.kancloud.cn/8b/9a/8b9a4a476230e4e1624937b2af552ec7_1075x217.png) ## 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() 添加，當前路由添加在歷史地址記錄里面，可以通過前進后退，查看 ![](https://img.kancloud.cn/cb/eb/cbebdf611d7bf5cfbfd39cab3528d0af_1054x204.png) ### history.replaceState() 即替換，當前路由就不再出現在歷史地址記錄里面 ![](https://img.kancloud.cn/31/50/3150fba7cf6d87b09e5401c352320e1a_368x227.png) ### history.go() history.forward() history.back() 都是對路由歷史訪問地址的跳轉。 go可以前進也可以后退，參數為正值前進，參數為負值后退 forward就是前進一步 back就是后退一步 ![](https://img.kancloud.cn/23/47/23476627aff80971696193f2c679f13e_1077x421.png)