前言
路由這個概念最早在后端出現，隨后前后端分離，直至當今的單頁面應用，路由也在一直發生變化。本文來總結一下路由變化和vue-router中的路由模式區別相關知識點。
正文
1、什么是前端路由
（1）后端路由階段
早期的頁面都是由html頁面在服務端渲染的，服務端直接返回給客戶端渲染好的html頁面供展示，一個頁面對應一個URL,首先向服務端請求對應的URL,服務器根據此URL去匹配對應的controller,最終生成html頁面返回給客戶端。這種方法有利於SEO的優化，但是這種頁面html和數據邏輯混合在一塊，開發人員開發維護起來困難。
（2）前后端分離路由階段
隨着Ajax的出現，由了前后端分離的開發方式，后端只負責邏輯處理和返回數據，前端只負責通過ajax將數據渲染到頁面。
（3）單頁面應用階段
其實SPA最主要的特點就是在前后端分離的基礎上加了一層前端路由.也就是前端來維護一套路由規則。
2、vue-router 提供了 hash 和 history 兩種路由模式
vue-router的作用就是通過改變URL，在不重新請求頁面的情況下，更新頁面視圖。簡單的說就是，雖然地址欄的地址改變了，但是並不是一個全新的頁面，而是之前的頁面某些部分進行了修改。要想解決上面的問題，前提需要知道瀏覽器window的history對象和location對象的hash屬性(詳情見 history對象詳解)，這兩個對象分別存在頁面路徑跳轉，但是頁面不刷新的功能。
（1）hash模式
對應了location對象的hash屬性，vue-router 默認 hash 模式,使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。
location.hash 對應 "(#)" 后面的字符串，比如：https://xxx.cn/xxx/6844904062698127367#heading 對應的值為 "#heading"，后面 hash 值的變化，並不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發 hashchange 這個事件，通過這個事件我們就可以知道 hash 值發生了哪些變化。然后我們便可以監聽 hashchange 來實現更新頁面部分內容的操作：比如下面的代碼監聽一個網頁 hash 值變化
window.addEventListener('hashchange', function() {
console.log('The hash has changed!')
}, false);
當網頁點擊返回或者前進的時候，hash值會發生變化，會觸發上面的hashchange事件並打印。
（2）history模式
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面，同時還有popstate 事件來監聽state變化，這樣地址欄中路徑就沒有了"#",但是當用戶使用了刷新等操作的時候，瀏覽器會給服務器發送請求，為了避免這種情況出現，所以這個實現需要服務端的支持，需要把所有路由都重定向到根路由，這里省略服務端的配置。
window.addEventListener('popstate', function() {
console.log('The state has changed!')
}, false);
（3）兩種模式的比較
同：hash和history都是屬於瀏覽器自身的特性，Vue-router只是利用了這兩個特性（通過調用瀏覽器接口）來實現前端路由。
不同：hash模式 會在瀏覽器的URL中加入'#'，而HTM5History就沒有'#'號，URL和正常的URL一樣。
history比於直接修改hash主要有以下優勢：a、pushState設置的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設置與當前同文檔的URL；b、pushState設置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中；而hash設置的新值必須與原來不一樣才會觸發記錄添加到棧中；c、pushState通過stateObject可以添加任意類型的數據到記錄中；而hash只可添加短字符串，且pushState可額外設置title屬性供后續使用。
補充：abstract模式
abstract 模式是 Vue Router 提供的一種不依賴瀏覽器 URL 的路由模式，可以將路由映射到任意的數據源，比如本地存儲、內存數據、服務器接口等。abstract 模式的優缺點如下：
優點：
-
- 不依賴瀏覽器 URL，可以在不同的數據源之間自由切換，靈活性高。
- 不需要服務端支持，可以輕松實現前端路由。
- 可以通過程序控制路由跳轉，可以自定義路由的行為，比如跳轉前進行數據加載等操作。
缺點：
-
- 不支持瀏覽器的前進和后退操作，需要自行實現歷史記錄和狀態管理的邏輯。
- 對於搜索引擎來說，無法獲取到 URL 中的內容，對於 SEO 不友好。
- 如果使用內存數據存儲路由，當頁面刷新時，路由信息會丟失。
需要根據項目的實際情況來選擇使用哪種路由模式。abstract 模式通常用於服務器渲染、單元測試等場景。在這些場景下，不需要瀏覽器 URL 和前進后退功能，而是需要靈活控制路由的跳轉行為。
寫在最后
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。
