這個router有兩種模式：hash模式（默認）、history模式（需配置mode: 'history'）
然后，我們來研究下兩者的原理：
我們先來認識下這位朋友#，這個#就是hash符號，中文名哈希符或錨點，當然這在我們前端領域姑且這么稱呼。
然后哈希符后面的值，我們稱之為哈希值。OK，接下來我們繼續分析他的原理。路由的哈希模式其實是利用了window可以監聽onhashchange事件，也就是說你的url中的哈希值（#后面的值）如果有變化，前端是可以做到監聽並做一些響應（搞點事情），這么一來，即使前端並沒有發起http請求他也能夠找到對應頁面的代碼塊進行按需加載。
后來人們給他起了一個霸氣的名字叫前端路由，成為了單頁應用標配。
大伙可以圍觀下網易雲音樂的url模式：https://music.163.com/#/friend
history模式
我們先介紹一下H5新推出的兩個神器：pushState與replaceState history模式中的原理。
pushState
瀏覽器不會向服務端請求數據，直接改變url地址，可以類似的理解為變相版的hash；但不像hash一樣，瀏覽器會記錄pushState的歷史記錄，可以使用瀏覽器的前進、后退功能作用。
replaceState
不同於pushState，replaceState僅僅是修改了對應的歷史記錄。
具體自行百度，簡而言之，這兩個神器的作用就是可以將url替換並且不刷新頁面，好比掛羊頭賣狗肉，
http並沒有去請求服務器該路徑下的資源，一旦刷新就會暴露這個實際不存在的“羊頭”，顯示404。
那么如何去解決history模式下刷新報404的弊端呢，這就需要服務器端做點手腳，將不存在的路徑請求重定向到入口文件（index.html），
前后端聯手，齊心協力做好“掛羊頭賣狗肉”的完美特效。
總之，pushState方法不會觸發頁面刷新，只是導致history對象發生變化，地址欄會有反應。