單頁面路由

深度剖析SPA前端路由原理與實現方式
1.什麼是SPA
single page web application
web項目只有一個HTML頁面，傳統頁面有好幾個HTML文件。切換路由的時候，不會跳轉路由
經過切換視圖
2.什麼是前端路由
根據不一樣的url地址展現不一樣的內容或頁面
後端：mvc，根據客戶提交的路徑，將請求解析到相應的控制器
所謂的路由：就是負責相應的客戶的http請求，客戶發送一個請求，咱們經過一個對應的處理函數來處理客戶的請求
路由=》函數
url發起請求，經過映射的函數來處理這個請求
// 多頁面
ajax出現的，才慢慢有了spa
大大的提升了web應用的交互體驗
1.spa沒法記住用戶的操做記錄，不管是刷新，仍是前進後退，都沒有辦法展現用戶真實的指望內容
2.spa因爲業務的不一樣它會有多重的頁面展現形式，可是隻有一個url，對seo不友好，不方便搜索引擎進行收錄

前端路由
就是爲了解決上述兩個問題
1.改變咱們的url，而且不讓咱們的瀏覽器向咱們的服務器發起請求
2.咱們必需要監聽到url的變化

前端路由中
實現咱們路由有兩種機制：
1.基於HASH
2.history

什麼是hash
url:http://study.163.com/#lincancan

#lincancan 就是咱們的hash值
hash值的變化，不會致使瀏覽器向服務器發起請求
hash的改變會觸發
hashchange事件
h5的history出現以前，基本都是使用hash的模式實現路由

history的實現
BOM
經過history對象
history.go(-1) //後退一晚上

簡單的實現頁面跳轉
h5中，兩個新的api

改變url，不會刷新頁面
history.pushState();

hisory.replaceState();

具有實現前端路由的能力

hash模式，當hash變化時候，能夠經過hashchange進行監聽
而history的改變，並不會觸發任何事件，因此咱們暫時沒法監聽history

換思路

能夠羅列出全部可能觸發history改變的狀況，咱們把這些狀況進行一個攔截，變相的去監聽history的改變

在單頁的history中，url的變化：有幾種方式引發1.點擊瀏覽器的前進或後退，會不會引發url的變化2.點擊a標籤是否是會引發咱們的url的變化3.js中，觸發history.pushState()函數4.js中，觸發history.replaceState()函數